Getting Started with Canvas

Contact Us or call 1-877-932-8228
Getting Started with Canvas

Getting Started with Canvas

The canvas element takes two attributes: height and width. Between the open and close tags, you can place fallback content for browsers that do not support canvas, like this:

<canvas id="my-canvas" width="500" height="500">Your browser doesn't support canvas.</canvas>

If you are using canvas to represent something that can be represented with an image as well, you could include an img element as your fallback content.


The <canvas> tag only creates a drawing surface. To actually do any drawing, you need to use JavaScript. The first step is getting the context. Although eventually other contexts will be supported (including 3d), the only currently supported context is 2d.

var canvas=document.getElementById("my-canvas"); context = canvas.getContext("2d");

Since many older browsers don't support canvas, they won't be able to get the context, so you should test for context support before beginning to draw:

var canvas=document.getElementById("my-canvas"); if (canvas.getContext) { context = canvas.getContext("2d"); //draw here }