HTML5 - How to draw a line
This article explains how to create a rectangle using the graphics capabilities of HTML5
Article Metadata
Compatibility
Platform(s): HTML5 compliant browser.
Article
Created: Maveric
(30 Jun 2011)
Last edited: hamishwillee
(27 Sep 2012)
Introduction
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.
Example code
Change the values to see the difference. This code will create a black line.
<html>
<canvas id="myCanvas" width="800" height="600">
Your Browser does not support the HTML5 CANVAS Property. //displays on a non-HTML5 supporting browser.
</canvas>
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
myContext.moveTo(0,0);
myContext.lineTo(800, 600);
myContext.stroke();
</script>
</html>
(no comments yet)