HTML5 Canvas: Line tool and coordinates

This entry is part 5 of 17 in the series HTML5 Canvas

Using the same line tool, we draw a horizontal line across a 500 by 500px square.

We first position the starting point of the line at (0,250) using moveTo and draw the line using lineTo.

We must keep in mind that the (0,0) point is located in the top left corner of the canvas by default, with the X value increasing as you move right and the Y value increasing as you move down.

<!DOCTYPE html>
<html lang='en'>
    <meta charset='utf-8'>
    <title> Canvas Line</title>
        canvas {
            border: 1px solid #000;
<canvas id='myCanvas' width='500' height='500'></canvas>
    var canvas = document.getElementById('myCanvas').getContext('2d');
    canvas.moveTo(0, 250);
    canvas.lineTo(500, 250);

Series Navigation<< HTML5 Canvas: Drawing and styling a rectangle or square in a canvas
HTML5 Canvas: Creating effects >>

Leave a comment

Leave a Reply