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
Introduction about Canvas
Also Read: HTML5 AutoFocus Explained
Let’s see the simple < canvas > element syntax with two specific attributes width and height only.Also with the core HTML5 attributes like id.
Here is the simple example on using < canvas > element in HTML5.
var canvas = document.getElementById("mycanvas");
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:
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.
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.