The canvas element is part of HTML5 which allows to render 2D shapes and bitmap images in dynamic manner.
Canvas Element History
→ Canvas element was initially introduced by Apple for the Mac OS X WebKit component in 2004.
→ Later on in 2005 it was taken in version 1.8 of Gecko browser
- Gecko (layout engine)
- Gecko is a free and open source layout engine used in many applications developed by Mozilla Foundation
Now almost all major browser supports the canvas element.To use the canvas element, you need a basic idea about HTML and Javascript.
Introduction about Canvas
The canvas element is defined using width and height attributes in HTML.Now HTML5 Canvas API is used for developing a canvas block. The canvas element supports a 2-dimensional drawing surface which you can develop with JavaScript.
Also Read: HTML5 AutoFocus Explained
< canvas > element in HTML5 gives an easy and effective way to draw graphics using JavaScript. It is used to draw graphs, make photo compositions or do some kind of animations in an object.
SYNTAX:
Let’s see the simple < canvas > element syntax with two specific attributes width and height only.Also with the core HTML5 attributes like id.
1 2 3 | <canvas id="mycanvas" width="100" height="100"></canvas> |
Examples
Here is the simple example on using < canvas > element in HTML5.
1 2 3 4 5 | <canvas id="example" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas> |
You can easily get that < canvas > element in the DOM using getElementById() method of Javascript using following code:
1 2 3 | var canvas = document.getElementById("mycanvas"); |
Let’s see the code snippet with using it, can draw on the canvas. For that, you need to use Javascript code as follows
1 2 3 4 5 6 | var example = document.getElementById('example'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50); |
This code draws a red rectangle on the screen.
The 2D Rendering Context:
The < canvas > element is by default blank and a script first needs to access the rendering context and draw on it for displaying anything using canvas.
The canvas element has a getContext DOM method which used to obtain the rendering context and its drawing functions. getContext is a function which accept one parameter, the type of context 2d.
Following is the code snippet which get required context for < canvas > element:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <html> <head> <script type="application/javascript"> function draw() { var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } </script> </head> <body onload="draw()"> <canvas id="canvas" width="300" height="300"></canvas> </body> </html> |
Browser Support:
HTML5 Canvas element is working fine in most of the browsers except for IE which doesn’t have native canvas support. In most cases, Firefox works fine but Chrome and Safari appear to offer the best experience for canvas element.
You can use ExplorerCanvas to support canvas element in Internet Explorer. You just need to include following javascript code:
1 2 3 | <!--[if IE]><script src="excanvas.js"></script><![endif]--> |
I hope you liked this article. You must get a clear idea about the canvas element in HTML5. I would like to know your invaluable suggestion on this topic.
Comments (1)