Drawing lines in canvas

Drawing a line, choosing a color, thickness, all the functions with examples.

We start by declaring a <canvas> tag as explained in the article Getting started with canvas.

<canvas id="moncanevas" width="400" height="150">
  Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.
</canvas>

A line is drawn with two instructions: moveTo and lineTo

The plot of the line is decomposed into two functions (as in BASIC): moveTo defines the X and Y coordinates of current point, which serves as a starting point for drawing a line segment.
And lineTo(x, y) draws a straight path between the current point, and a new point whose X and Y coordinates are given as parameters.
In addition a new line starts with the function beginPath() and is actually drawn by the function stroke().

canvas = document.getElementById("moncanevas"); 
if (canvas.getContext)
{    
    context = canvas.getContext('2d'); 
}
function drawLine()
{
 context.beginPath();
 context.moveTo(20,100);
 context.lineTo(200,10);
 context.stroke(); 
}
Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

A color is given with the strokeStyle attribute

Choosing the color of a path is not a parameter but is given as a whole. The strokeStyle attribute is assigned for all strokes ahead until it is reassigned.
For solid forms such as a filled rectangle, use fillStyle.

We assigns a value to these attributes as a CSS color: blue, #008, #000080, rgba (0,0,128,1).

context.strokeStyle='green';

The drawLine function now becomes:

function drawLine()
{
  context.beginPath();
  context.strokeStyle='green';
  context.moveTo(20,100);
  context.lineTo(200,10);
  context.stroke(); 
}

Important: To give different colors to line drawings, one must add the function beginPath() before drawing a new line. Segments even separated are considered part of the same line until the new occurrence of the function beginPath.

Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

Four formats may be used to define a color ...

And be assigned to strokeStyle or fillStyle (besides textures as other options). These values ​​are enclosed in quotation marks and can be the name of a color, the hexadecimal code on the form red, green, blue, the decimal values ​​on three numbers or four with transparency.

ctx.fillStyle = "white";
ctx.fillStyle = "#FFFFFF";
ctx.fillStyle = "rgb(255,255,255)";
ctx.fillStyle = "rgba(128,128,128,0.5)";

The fourth attribute of rgba (a = alpha) sets the opacity that varies from 0.0 to 1, with 0 being completely transparent and 1 total opacity, which is always the case for the simple rgb() format. So intermediate transparency is defined by 0.5.

The lineWidth attribute defines the thickness of the line

This is done with the function lineWidth. A default unit pixel is used and the unit does not need to be given, just a single integer value is assigned. 

function drawLine()
{
  context.strokeStyle='green';
  context.lineWidth=4; 
  context.moveTo(20,100);
  context.lineTo(200,10);
  context.stroke(); 

}
Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

The ends of the line may be rounded or squared

When it is thick, you can give ends of the line a round or square shape. It can not have the shape of an arrow (nor in SVG).
To change the shape we assign the lineCap attribute with the value round, square or butt (no end) which is the default.
When the line has no end added, its length is not increased, the length of the end is equivalent to the width of the line defined by lineWidth.

For example: context.lineCap='round';

We will try the three values: butt in green, square in blue, round in red.

Canvas requires a modern browser: Chrome, Firefox, IE9, Safari.

We see that the ends of the line increases length in proportion to its width.

Full source code:

function drawLine4()
{
  var context = document.getElementById("canvas4").getContext('2d');
  context.lineWidth='8';
  context.strokeStyle='green';
  context.beginPath();
  context.moveTo(20,20);
  context.lineTo(200,20);
  context.stroke();
  context.beginPath();
  context.strokeStyle='#800';
  context.lineCap='square';
  context.moveTo(20,50);
  context.lineTo(200,50);
  context.stroke();
  context.strokeStyle='rgb(128,0,0)';
  context.lineCap='round';
  context.beginPath();
  context.moveTo(20,80);
  context.lineTo(200,80);
  context.stroke();
}

drawLine4();

You should also know ...

Applications