Official Blog of Azilen

The Techie Explorations

Plunge into HTML5 Canvas – Let’s begin

Before the arrival of HTML5 Canvas API it’s always a tough task to build complex graphs and 2D/3D designs in the website. Developers could only use drawing APIs all the way through plug-ins like SVG (Scalable Vector Graphics) and VML (vector Markup Language) with some specific web browsers like Internet Explorer. For example, to draw a simple diagonal line without a canvas element is easy, but it’s a quite difficult task if you don’t have a simple 2D drawing API at your clearance.

Canvas is just providing that, and that’s why it’s exceptionally useful feature to have in the browser.

What is Canvas?

The Concept of Canvas is at first developed by APPLE to be used in Mac OS X WebKit to create dashboard widgets.

In 2012, first draft of HTML5 is published as a working draft for the candidate recommendation and Canvas (2D and 3D) is the part of the HTML5 specification. HTML5 Canvas is providing a plug-ins free paradigm for browser. It provides native support for many features which is only possible with 3rd party plug-ins or JavaScript Hacks.

In 2012, first draft of HTML5 is published as a working draft for the candidate recommendation and Canvas (2D and 3D) is the part of the HTML5 specification. HTML5 Canvas is providing a plug-ins free paradigm for browser. It provides native support for many features which is only possible with 3rd party plug-ins or JavaScript Hacks.

Getting Started with HTML5 Canvas

When a canvas tag is added into the web page either statically or dynamically, it creates a rectangular area in the page or by default rectangular area is 150 pixels high and 300 pixels wide. User can create custom size of canvas by providing specific size. Unlike SVG, which is vector base, canvas is pixel based.

Canvas Element

After adding canvas element in your webpage you can manipulate its base on requirement using JavaScript. User can add lines, graphics, charts, animated text within it.

If you are working with canvas dynamically/programmatically, then you have to first get its context and perform some actions on context and finally apply those actions on the context.

Following lines of code required to get context of the canvas using the help of standard document.getElementById Tag.

If you are using JQuery then your code is like this,

To locate a canvas object, you need to access its 2D drawing context.

W3C defines 2D drawing context in the following way,

“The 2D context represents a flat Cartesian surface whose origin (0, 0) is at the top left corner, with the coordinate space having x values increasing when going right, and y values increasing when going down.”

Canvas Coordinates

Coordinates in a canvas start at x=0, y=0 in the upper-left corner – which we refer as the origin (0, 0). Using fillRect(x,y, width,height) increases the size horizontally over the x-axis and vertically over the y-axis.

Canvas – Paths

You can render any shape using HTML5 Canvas API. You can draw shapes, lines, text and many more using HTML5 Canvas. Following are few functions which will help you to draw shapes using canvas.

moveTo(x,y) Move the current pointer to a specific destination without drawing
lineTo(x,y) Move the current pointer to a specific destination with drawing a straight line
stroke() Render a line

arc(x,y,r,start,stop) Use to render a circle with x & y coordinates, radius, starting and ending angle.
beginPath() Start/Restart the path

closePath() Close the current path

fill() Fill a shape with colour
fillStyle FillStyle is property to fill colour or gradient

fillText(text,x,y) Draws a filled text
strokeText(text,x,y) Draws a text
font Property defines the font for text

fillText

strokeText

Browser Support for HTML5 Canvas

After arrival of Internet Explorer 9, almost every browser vendors are trying to provide full support for the HTML5 Canvas but majorly available browsers are not providing full support for HTML5 Canvas. Below is the browsers detail which tells you about that how they are dealing with HTML5 Canvas.

Browser

Description

Internet Explorer IE 8 and earlier versions do not support <canvas> element
Google Chrome Supports <canvas> element through –webkit–
Firefox Firefox may have support via the moz setting
Safari 6 for Mac Supports <canvas> element through –webkit–
Opera Opera 15 has support of few features

If you are working with the <canvas> element than it’s a good practice to check browser compatibility and in the case where the client’s browser is not supporting <canvas> element then you can place other alternate text.

This article provides you the basic overview about the HTML5 Canvas and its different property and more. In the upcoming article we will discuss more about HTML5 Canvas like Background Patterns, Canvas Transforms, Canvas Security, Animation, etc. Stay Tuned!

Image Courtesy: teamtreehouse.com

Spread this with your Network

Leave a reply