Events attached to object inside canvas

Question

I have simply canvas code which draw rect on the canvas

var x=document.getElementById(\"canvas\");
var ctx=x.getContext(\"2d\");
ctx.rect(20,20,150,100);
ctx         


        

Answer 1

Shapes and paths are drawn to the canvas as side-effects, so there is no element to add an event listener to; you could, however, add an event listener to the entire canvas or to an element that shares a location with the canvas, and when it is clicked then redraw the canvas with the rectangle, but red (or anything else changed). (make sure to clear the canvas before redrawing it with the .clearRect() method).