HTML5 - How to draw a line

From Nokia Developer Wiki
Jump to: navigation, search

This article explains how to create a rectangle using the graphics capabilities of HTML5

Article Metadata
Platform(s): HTML5 compliant browser.
Created: Maveric (30 Jun 2011)
Last edited: hamishwillee (27 Sep 2012)


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.

<canvas id="myCanvas" width="800" height="600">
Your Browser does not support the HTML5 CANVAS Property. //displays on a non-HTML5 supporting browser.
<script type="text/javascript">
var myCanvas = document.getElementById("myCanvas");
var myContext = myCanvas.getContext("2d");
myContext.lineTo(800, 600);
This page was last modified on 27 September 2012, at 08:23.
52 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.