O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Drawing lines

The first thing we want to implement is a way for the user to draw simple lines, or to scribble on the canvas. To do that we need to get the points when the user moves the mouse with the mouse button pressed down and draw lines between them. So let's learn how to draw on the canvas.

Paths and strokes

The most primitive way to draw on the canvas is by defining paths and then stroking, or drawing them. Think of it as planning what you are going to draw in your head, then putting your pen to the paper, and actually drawing it out.

To create a path you define it by specifying two or more points using moveTo() and lineTo() methods. Then you draw it to the canvas by calling the stroke() method. There are four basic methods that you use ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required