Tutorial by Examples

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 be...

What is a "Shape"? You typically save your shapes by creating a JavaScript "shape" object representing each shape. var myCircle = { x:30, y:20, radius:15 }; Of course, you're not really saving shapes. Instead, you're saving the definition of how to draw the shapes. Then put...

Most Canvas drawings are either rectangular (rectangles, images, text-blocks) or circular (circles). Circles & rectangles have mathematical tests to check if the mouse is inside them. This makes testing circles and rectangles easy, quick and efficient. You can "hit-test" hundreds of c...

See this Example for a general explanation of dragging Shapes around the Canvas. This annotated example shows how to drag images around the Canvas // canvas related vars var canvas=document.createElement("canvas"); var ctx=canvas.getContext("2d"); canvas.width=378; canvas.h...