HTML5 has been around for a while now and a great many more websites are implementing designs with HTML5. This combined with the responsive website design means a lot of changes in the new website designs to come. That said HTML5 came with many new elements and not all of them are used commonly. One such element is the canvas element (<canvas>). Hence it is a good idea to start with a short introduction to it.

What is HTML5’s canvas element (<canvas>) ?

<canvas> is a rectangular container area on the HTML page. There are several methods that can be used to draw paths, circles, boxes, text and graphics images. The canvas element is a HTML5 element that allows you to create scriptable, interactive bitmap images that are dynamic. This is possible because of the drawing API it provides.

The good part about the canvas element is that there are no limitations of any kind in terms of what you can draw. What this means that you can draw a number of paths and interact with them as well and to top it all it is also dynamic. Although this is good for the majority of us it is not suitable for people with disabilities. In fact it is almost impossible for people with disabilities to access it. One of the several reasons are that it does not obtain keyboard focus.

There is a feature in the canvas element <canvas> that allows the authors to place HTML content between the opening and closing tags (also known as fall back content). This is a good alternative for non-text content. At the same time it is necessary to have a programming element associated with the content with regions on the <canvas> and visually indicating when these regions have focus, dynamic and interactive <canvas> applications to be fully accessible.

A basic example of a <canvas> (canvas tag) is mentioned below which simply defines a rectangular area on the HTML page.

<canvas id=“myCanvas” width=“200” height=“100”style=“border:1px solid #000000;”>
</canvas>

The origins of Canvas element:

Canvas has originated from Apple. Apple’s Mac OS X Webkit component makes use of the canvas element since 2004. It is used to power applications like dashboard widgets and safari browser. This was later adopted by other browsers like Gecko and Opear. This has since then been standardized by the Web Hypertext Application Technology Working Group and implemented in HTML5.

Usage of Canvas element:

The Canvas tag defines a draw-able region in the HTML code with a fixed height and width. This region can be accessed via JavaScript code to do many different things. There is an entire set of functions that can be used to draw common 2D APIs. It is often used for making graphs, games and image compositions as well as animations.

Here is a quick example on how the canvas element <canvas> can be used.

<canvasid=“example”width=“200”height=“200”>

This text is displayed if your browser does not support HTML5 Canvas.

</canvas>

The above code generates a rectangle on the screen that can be used by the JavaScript that follows.

var example = document.getElementById(‘example’);

var context = example.getContext(‘2d’);

context.fillStyle=‘red’;

context.fillRect(30,30,50,50);

This is the JavaScript code that is can be used to draw a red rectangle on the canvas element. In addition to which the canvas element also provides several other options like save() and restore(). As the names suggest they are used to save and restore the canvas attributes context.

The canvas element has two different sizes in a way. The first one is the size of the canvas element and the other is size of the element’s drawing surface.

How does it compare with SVG (Scalable Vector Graphics):

Scalable Vector Graphics (SVG) is another standard for drawing shapes in browsers and as the name suggest it is vector based. The <canvas> element (canvas) on the other hand is raster based. Being vector based any shape the shape is remembered as an object in a scene or document object model and it is then rendered as a bitmap. Hence if there are changes in the SVG object, the browser has the ability to automatically re-render it.

To put this in more simple terms. If for example a canvas element has a rectangle drawn and it’s position is changed, its position and data will be forgotten by the system thus requiring the entire scene to be redrawn and this include any other objects that might have been present. The deal with SVG is quite different though. You have the ability to change the position of the rectangle and the browser will automatically figure out how to redraw it.

The canvas element <canvas> can make use of JavaScript libraries which have the ability to add scene graph capabilities too. The SVG images are represented in XML and the complex scenes can be maintained in XML too.

A few facts about Canvas:

Each canvas element created has a drawing context which is used to do all the magic. This is done via JavaScript which renders it to the canvas. The way it works is you first reference the canvas element by extracting the element ID.

After doing so is possible to pass a string to the canvas. Here are a few facts and features about a Canvas:

• The canvas element <canvas> is exclusively 2D.

• There is no 3D canvas

• It is possible reset the canvas by simply reassigning the width element which resets all the properties of the drawing context.

• The canvas allows to draw a rectangle and even fill it with color

• Paths are also quite popular with the Canvas. This allows you to draw lines and curves. It is like drawing with a pencil.

• The canvas also allows you to draw text on the canvas. However it will not allow any formatting options normally available through CSS.

• Gradients is one of the other features that a canvas has to offer. Gradients open a lot of doors and it is usually widely used.

• The canvas element also fine with images and can be rendered onto the canvas by using JavaScript

In all there is a lot that canvas has to offer and a lot that a designer can explore. JavaScript has several functions that can be used to render the canvas in many was that you can imagine.

Conclusion:

Responsive Web Design with HTML5 and CSS3 is gaining in popularity these days and it is a good opportunity for designers to accept HTML5 in a big way and also use the many new feature that it brings. The canvas element <canvas> is just one of the new elements that is available.

Alakmalak is one firm that has witnessed several trends changes in website design. The designers are thus not only experienced but also well aware of current trends and requirements. This makes them more than prepared to deliver new, creative and innovative designs to our clients.

Thus it is not surprising that they crossed the magical figure of having developed 2000 websites a long time ago. Besides which those clients which happen to be from all across the globe really appreciate the design and development work and continue to remain our clients.

• how to design with HTML5
• Web Design with HTML5
• What is HTML5’s canvas element