HTML Canvas Tutorial

Hope you are aware of basic knowledge on canvas from my previous tutorial. Now lets only move on practical part and its explanation.

When using canvas, it’s important to understand the difference between the canvas element and the canvas context, as often times people get these confused.  The canvas element is the actual DOM node that’s embedded in the HTML page.  The canvas context is an object with properties and methods that you can use to render graphics inside the canvas element.  The context can be 2d or webgl (3d)


<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);


As you know the difference between canvas and the context of canvas that we used in script, here we will get canvas id by document.getElementById and align getContext of 2d or 3d to it.

Canvas Line Tutorial:

To draw a line or anything we will keep on using mainly 4 methods namely beginPath()moveTo()lineTo(), and stroke() methods.

beginPath() – method to declare that we are about to draw a new path

moveTo() – method to position the context point (i.e. drawing cursor)

lineTo() – method to draw a straight line from the starting position to a new position

stroke() – to make the line visible, we can apply a stroke to the line.


<!DOCTYPE HTML> // to declare the type as html5 
body {
margin: 0px;
padding: 0px;
<canvas id=”myCanvas” width=”578″ height=”200″></canvas>
var canvas = document.getElementById(‘myCanvas’);
var context = canvas.getContext(‘2d’);

context.moveTo(100, 150);
context.lineTo(450, 50);

Here moveTo and lineTo have x & y coordinates. In order to understand well of the diagram representation that effects with values..better try to change values..x,y works in horizontal and vertical representation respectively.

if you give (0,10) in moveTo, it starts from 10th point of y-axis and draw line based on lineTo coordinate values.

Before start of this doing practically, better understand the canvas coordinate system.

Understanding the Canvas Coordinate System

In a 2D space, positions are referenced using X and Y coordinates. The X axis extends horizontally, and the Y axis extends vertically. The center has a position x = 0 and y = 0, that can also be expressed as (0, 0). This method of positioning objects, used in mathematics, is known as the Cartesian coordinate system.

The Canvas coordinate system, however, places the origin at the upper-left corner of the canvas, with X coordinates increasing to the right and Y coordinates increasing toward the bottom of the canvas. So unlike a standard Cartesian coordinate space, the Canvas space doesn’t have visible negative points. Using negative coordinates won’t cause your application to fail, but objects positioned using negative coordinate points won’t appear on the page.

Canvas Coordinate Space

I hope with this now you clearly understood the coordinate values.


One thought on “HTML Canvas Tutorial

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s