HTML5 - How to draw a line
This article explains how to create a rectangle using the graphics capabilities of HTML5
Drawing a line with HTML5 is easy. What you need, is to instantiate the graphics context and then use moveTo(), lineTo(), and stroke() methods.
The job of moveTo() method is to create a new subpath on the point, which then will become new point for the drawing context. With the lineTo() method we will then actually create the visible line by drawing from point a to point b.
Purpose of the stroke() method is that it will set the color of the line we draw, eventually making it visible on screen.
Change the values to see the difference. This code will create a black line.
<canvas id="myCanvas" width="800" height="600">
Your Browser does not support the HTML5 CANVAS Property. //displays on a non-HTML5 supporting browser.
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");