HTML5 Canvas: Beginner Tutorial Chapter 2 - Drawing Lines

In the last part of this tutorial, we have seen how to integrate a Canvas into a website and how to access it. Now, we would like to start drawing on the Canvas.

The HTML5 Canvas Tutorial is divided into the following chapters:

• Chapter 1: Introduction and Basics
• Chapter 2: Drawing Lines
• Chapter 3: Rectangles and Circles
• Chapter 4: Write Text on Canvas

I recommend reading the first chapter if you are not familiar with the HTML5 Canvas basics, because the other parts are based on the things described there.

Lines

After we have fetched the variable "context", we can start drawing. We will begin with just drawing a simple line.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);         // define path
context.lineTo(100, 100);
context.lineTo(50, 100);
context.stroke();             // draw path

For that, we need the methods beginPath, moveTo, lineTo and stroke. First of all, we start a new path with beginPath.

After that, we are using moveTo in order to go to a specific position (in this case the point 0/0). Then, we are using lineTo to draw an imaginary line to the passed point (100/100). The next lineTo is drawing this imaginary line further.

However, doing that will draw nothing we can see. This only creates a path with which we can do lots of things later. Calling stroke() then gives the command to finally display the path as line.

Colored Lines

The line from our first example is black, black is the default color. If we would like to draw a line using another color, we have to use the property strokeStyle.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);             // define path
context.lineTo(100, 100);
context.lineTo(50, 100);
context.strokeStyle = "#FF0000";  // set style for line
context.stroke();                 // draw line

Here, we are setting strokeStyle to the color red (#FF0000). As you can see, the function stroke() always draws according to the last settings we have made. At the time, we have created the path, strokeStyle was not defined, nevertheless the line is drawn in red color.

Using strokeStyle you can do much more than only specifying another color for the line: For example, you can also define color gradients, but to get you started, defining the line color should be sufficient at this moment.

Modify Line Width

Up to now, all lines we have drawn had a line width of 1 pixel. This is the default size.

var canvas = document.getElementById("canv");
var context = canvas.getContext("2d");

context.beginPath();
context.moveTo(0, 0);             // define path
context.lineTo(100, 100);
context.lineTo(50, 100);
context.lineWidth = 10;           // adjust line width
context.strokeStyle = "#FF0000";  // set style for line
context.stroke();                 // draw line

Using the property lineWidth, we can change this size and as you can see, we are drawing a line with a width of 10 pixels in the example.

Next Step: Drawing Rectangles and Circles

After we have drawn simple lines, we would now see how to draw more complex objects. In the third part of this tutorial, we can see how to draw rectangles, squares and circles using HTML 5.