HTML5 Canvas Element Guide

HTML5 <canvas>

The HTML5 <canvas> element has a unique history. But we are not going to focusing on element history. The <canvas> element takes a bit of work to understand and, unlike your usual run-of-the-mill HTML elements, requires more than just static markup and styling. In this guide, will start with basic understanding of the canvas element and what kinds of things are required and expected in its associated code. This should help you to get a firm fundamental understanding of canvas in preparation for creating something interesting and powerful with this unique and other HTML5 elements.

Maybe you heard about HTML 5 Canvas API, but don’t know what it’s good for?  It’s the way to go if you want to code an HTML5 game? Or it gives you explicit control over drawing in your browser?  So what does all that mean? Just what is the HTML5 Canvas API?

Let me pull back the curtain a little and give you some insight into what the HTML5 Canvas API is all about and what it can do for you and your web apps.

The HTML5 Canvas API is a procedural drawing API for JavaScript.  It’s well supported in all major browsers including Internet Explorer (starting with version 9) and is defined by the HTML5 Canvas W3C specification.

Also from Wikipedia you will get the detailed definition of <canvas> element as:

“Canvas consists of a drawable region defined in HTML code with height and width attributes. JavaScript code may access the area through a full set of drawing functions similar to those of other common 2D APIs, thus allowing for dynamically generated graphics. Some anticipated uses of canvas include building graphs, animations, games, and image composition.”

Here are just some of the capabilities at a glance:

  • Defining Paths with lines, curves, arcs and more…
  • Filling and Stroking Paths
  • Clipping to a Path
  • Filling and Stroking Text
  • Affine Transformation (Translate, Scale, Rotate, Skew)
  • Fills using Gradients and Patterns
  • Pixel Manipulation
  • Offscreen Rendering
  • Rendering Blurred Shadows
  • Dashed Lines, Line End Caps and Joins
  • Exporting Canvas Rendering to a PNG or JPEG

First of all the HTML5 Canvas is a browser DOM object and can be added to your webpage either declaratively through the <canvas> tag or programmatically through the createElement method.  Once defined it contains a frame buffer bitmap at screen resolution that is the same width and height of the canvas object itself.

As the element has some complexity so will start with markup.

<canvas id=”canvasId” width=”200″ height=”200″></canvas>

Above tag in your HTML page will create a canvas object on your page, that is 200 pixels width and 200 pixels height and it will be transparent.  The DOM object associated with the canvas object doesn’t directly have any drawing methods.  In order to actually draw on the canvas, you have to obtain a drawing context object by calling the canvas’s getContext method with a string parameter of “2d”.

//Get reference of canvas object
var canvas = document.getElementById(“canvasId”);
//Get reference of canvas 2d context
var context = canvas.getContext(“2d”);
//Display filled rectangle on screen
context.fillStyle = “rgba(0, 0, 255, .5)”;
context.fillRect(25, 25, 125, 125);

Drawing Rectangles and Paths

The context object returned contains the actual drawing APIs that allow us to draw on our canvas object.  The 2D context allows for the use of a number of different drawing methods and properties, each utility syntax familiar to experienced CSS and JavaScript developers.

//Define path in the shape of triangle with the moveTo and lineTo methods
context.beginPath();
context.moveTo(400,50);
context.lineTo(50,400);
context.lineTo(400,400);
context.closePath();

// Fill the path
context.fillStyle="red";
context.fill();

You can get in details information about Colors, Styles and Shadows, Line Styles, Rectangles, Paths the drawing API information from the reference.

If the article helpful to you to understand basic idea about HTML5 canvas element than share your thoughts and take a look at the full canvas specification and experiment.

Enjoy RIA… 🙂

Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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

%d bloggers like this: