A problem: Canvas only remembers pixels, not shapes or images

This is an image of a circular beach ball, and of course, you can’t drag the ball around the image.

It may surprise you that just like an image, if you draw a circle on a Canvas you cannot drag that circle around the canvas. That’s because the canvas won’t remember where it drew the circle.

// this arc (==circle) is not draggable!!
context.beginPath();
context.arc(20, 30, 15, 0, Math.PI*2);
context.fillStyle='blue';
context.fill();

What the Canvas DOESN’T know…

• …where you drew the circle (it does not know x,y =[20,30]).
• …the size of the circle (it does not know radius=15).
• …the color of the circle. (it does not know the circle is blue).

What the Canvas DOES know…

Canvas knows the color of every pixel on it’s drawing surface.

The canvas can tell you that at x,y==[20,30] there is a blue pixel, but it does not know if this blue pixel is part of a circle.

What this means…

This means everything drawn on the Canvas is permanent: immovable and unchangeable.

• Canvas can’t move the circle or resize the circle.
• Canvas can’t recolor the circle or erase the circle.
• Canvas can’t say if the mouse is hovering over the circle.
• Canvas can’t say if the circle is colliding with another circle.
• Canvas can’t let a user drag the circle around the Canvas.

But Canvas can give the I-L-L-U-S-I-O-N of movement