html5 canvas basics – drawing lines – John Stejskal : Software and Game Developer

In this tutorial I will be exploring the basics of drawing strait and curves lines on the HTML5 Canvas

Below is a good starting point for writing html5 canvas code. Having the below snipped in a text file, ready to go, is a nice way to easily start doing some cool things without writing the doctype, window.load etc.


<script type="text/javascript">

window.onload = function(){

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

 //Put canvas code here

};
</script>

 <canvas id="myCanvas" width="640" height="480">
 </canvas>

As you can see, the canvas code is not actually written between the canvas tags, instead we put it in the window.onload function. Doing so makes sure that everything is loaded before anything attempts to be displayed.

Drawing lines on the canvas

Drawing lines on the canvas is very similar to drawing lines in AS3 where moveTo() and lineTo() are used to create the starting point and destination of a line respectively

using the above html template, add the following code to the area below the line with “//put canvas code here”

    context.moveTo(200, canvas.height / 2 - 50); //starting point (x,y)
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50); // draw line from start point to this point (x,y)
    context.lineWidth = 20; //width of the line
    context.strokeStyle = "#0000ff"; // line color
    context.stroke(); //give it a stroke

Line Caps

There are three different ‘cap’ styles when drawing lines, ‘butt’, ’round’ and ‘square’. Cap’s are string values which set the style of the end/tips of the line.

Below we will draw three lines demonstrating the different cap styles

*Note – ‘butt’ is the default cap style if no cap style is specified in the mark-up.


    // butt line cap (top line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 - 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 - 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "butt";
    context.stroke();
     context.closePath();

    // round line cap (middle line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2);
    context.lineTo(canvas.width - 200, canvas.height / 2);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "round";
    context.stroke();
     context.closePath();

    // square line cap (bottom line)
    context.beginPath();
    context.moveTo(200, canvas.height / 2 + 50);
    context.lineTo(canvas.width - 200, canvas.height / 2 + 50);
    context.lineWidth = 20;
    context.strokeStyle = "#0000ff"; // line color
    context.lineCap = "square";
    context.stroke();
    context.closePath();

I have also added 2 new lines

//creates a new path, breaking off from any previous path
context.beginPath();
//closes the current path
context.closePath();

all this means is that I am starting a new line and don’t want to continue drawing from my previous.

It is also important to note that setting square or round caps will change the length of the line based on its width/2.

Curved Lines

When making curves lines on the canvas you will be using either of the following curve types


context.quadraticCurveTo(controlPointX, controlPointY, endPointX, endPointY);

context.bezierCurveTo(controlPoint1X, controlPoint1Y, controlPoint2X, controlPoint2Y, endPointX, endPointY);

As you can see the bezier curve is much more robust, however it is possible to chain 2 or more quadratic curves together to simulate a bezier curve

html5 canvas basics – drawing lines