Just like the significance of a canvas in the life of every painter, even the world of HTML5 web development offers the developer a complete freedom of converting his/her ideas regarding graphics and animations into reality via a technology named as HTML5 Canvas. Considering the ongoing popularity and demand for HTML5 and its robust specifications, a large majority of web developers have already started taking complete advantages of this technology to draw graphics and create animations directly within the browser- something that was impossible in the past. As you read through this post, you'll get to learn more about HTML5 Canvas, its features and usage-everything under a single hood.
A closer look at HTML5 Canvas
Understanding the concept of HTML5 Canvas rendering contexts
Every HTML5 Canvas element includes a context which defines HTML5 Canvas API. For instance, while using HTML5 Canvas element, the 3d context will be utilized for drawing 3D Graphics and also for bitmap image manipulation.
A look at usage of HTML5 Canvas Element
For understanding the use of HTML5 Canvas, you'll need to have a code editor in addition to HTML5 canvas-compatible browser. For this tutorial, I've used the Sublime Text code editor along Google Chrome browser.
HTML Structure would look like this:
<canvas id="demoCanvas" style="border: 1px solid #000; background: #ccc;" width="400" height="150"></canvas>
var elementID = document.getElementById('demoCanvas');
context = elementID.getContext('2d');
// define example...
Some Basic Canvas Examples
With HTML5 Canvas, you can easily create any type of object such as a path, text, line, curve, shapes etc. Let us understand the use of HTML5 via the three examples discussed below:
Example No.1- Drawing lines
We'll use four canvas API methods for drawing a line. To begin with, we'll use beginPath() method which would instruct browser to prepare to draw new path. After this, the moveTo(x, y) method will be used for setting the line's starting point. Third method is lineTo(x,y) which will allow you to set the line's ending point, followed by finally drawing the line by simply connecting the starting and ending points. At this point, eventhough the line has been drawn, it's not visible. So, we'll be using the stroke() method for displaying the created line with the default black color.
Here's a look at the four methods:
Output for the same would look like this:
Example No.2- Drawing Text
In order to draw text on the HTML5 canvas, we'll be using the fillText(string, x, y) method along with font property for setting font, size and style of the text. Have a look at this:
context.font = "22px verdana";
context.fillText("HTML5 Canvas Text",20,70);
Output for the same will be similar to this:
Example No.3- Drawing a Rectangle
Using HTML5 canvas for drawing a rectangle just expects you to use the fillRect(x, y, width, height) method for setting the coordinates along with dimensions. Plus, we'll also use the fillStyle property for setting the rectangle's fill color.
Output would look like this:
PS- The rectangle has been positioned near the top left corner of the page.
If you've been using HTML5 since years from now, you'd definitely regret missing the opportunity of making the most of the HTML5 Canvas technology. So, what keeps you waiting? Get going now and explore this great HTML5 add-on for your benefit.
Author Bio: Rick Brown is a skilled iPhone application developer for Mobiers Ltd – a reliable Mobile development company. You can explore more about the development tips and tricks by clearing your queries with him.