Drawing Lines

Contact Us or call 1-877-932-8228
Drawing Lines

Drawing Lines

Let's start by drawing a simple line. Take a look at the following sample:

Code Sample:

html5-canvas/Demos/path-simple.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Path - Simple</title>
<link href="style.css" rel="stylesheet" type="text/css">
<script>
function drawPath() {
	var canvas=document.getElementById("my-canvas");
	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.stroke();
	}
}
</script>
</head>
<body>
<canvas id="my-canvas" height="200" width="200">Your browser doesn't support canvas.</canvas>
<button onclick="drawPath();">Draw</button>
</body>
</html>

After clicking on the Line button, a line will get drawn as shown below:

Note that by default the canvas element has no border. We've used CSS to add a dotted border.

Let's look at the code:

  1. context.beginPath(); - tells canvas to forget any existing path being worked on and start a brand new path.
  2. context.moveTo(50,50); - tells canvas to move to the x,y position of the moveTo(x,y) method. No sub-path is created.
  3. context.lineTo(100,100); - tells canvas to create a sub-path from the current point to the x,y position of the lineTo(x,y) method. Note that this does not draw the sub-path. It just stores it in memory. Each call to lineTo() will create an additional sub-path.
  4. context.stroke(); - tells canvas to go ahead and draw the path, which is stored as a list of sub-paths making up one single path. The stroke() method is what gets your path on the canvas.

Multiple Sub-Paths

The demo below shows how to use multiple sub-paths to create a triangle:

Code Sample:

html5-canvas/Demos/path-multiple-subpaths.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.lineTo(100,50);
		context.lineTo(50,50);
		context.stroke();
	}
---- C O D E   O M I T T E D ----

We can replace the final lineTo() call, which is used to close the triangle, with a call to closePath(), which attempts to create a sub-path from the current location to the starting point - the point at which the first sub-path started:

Code Sample:

html5-canvas/Demos/path-closepath.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.lineTo(100,50);
		context.closePath();
		context.stroke();
	}
---- C O D E   O M I T T E D ----

Both this and the previous example render as follows:

Note that you can also hop around using context.moveTo(x,y) to create disconnected sub-paths:

Code Sample:

html5-canvas/Demos/path-disconnected.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.moveTo(50,60);
		context.lineTo(100,110);
		context.moveTo(50,70);
		context.lineTo(100,120);
		context.stroke();
	}
---- C O D E   O M I T T E D ----

This will render as follows:

The Path Drawing Process

So, the process for drawing a basic path is as follows:

  1. Begin the path: context.beginPath()
  2. Create the sub-paths: one or more calls to context.moveTo(x,y) and context.lineTo(x,y)
  3. Optionally close the path: context.closePath()
  4. Draw the path: context.stroke()

The fill() Method

We saw the stroke() method for drawing the path. In cases where you have multiple connected sub-paths you can use the fill() method to fill the area with the current fill color (black by default):

Code Sample:

html5-canvas/Demos/path-fill.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.lineTo(100,50);
		context.fill();
	}
---- C O D E   O M I T T E D ----

This will render as follows:

Note that in this example, the path was not closed (with closePath()) or drawn (with stroke()). The example below uses both stroke() and fill(). To see where the stroke starts and the fill ends, we have introduced the fillStyle and strokeStyle properties, which are used to set colors, and the lineWidth property, which sets the weight of the stroke.

Code Sample:

html5-canvas/Demos/path-fill-stroke.html
<!DOCTYPE HTML>
---- C O D E   O M I T T E D ----

	if (canvas.getContext) {
		context = canvas.getContext("2d");
		context.lineWidth = 10;
		context.strokeStyle = "rgb(255,0,0)";
		context.fillStyle = "rgb(204,255,255)";
		context.beginPath();
		context.moveTo(50,50);
		context.lineTo(100,100);
		context.lineTo(100,50);
		context.closePath();
		context.stroke();
		context.fill();
	}
---- C O D E   O M I T T E D ----

This will render as follows:

Next