HTML5 Canvas Element Guide
<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.
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
//Define path in the shape of triangle with the moveTo and lineTo methods
// Fill the path
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… 🙂