Undoubtedly, the canvas element in HTML5 is the biggest feature that developers will want to use to develop truly rich web applications without needing to install browser plug-ins like Adobe's Flash player. IE9 was born at a time when client richness is at the forefront of developers' minds. Modern browsers like Chrome, Firefox, and Internet Explorer 9 and 10 all support it. But what exactly is the canvas element in HTML5? How can you use it to create rich web applications?
If you're unfamiliar with HTML5, before diving into this article, try learning more here.
What's the Canvas Element For?
Officially a canvas is "a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly". In layman's terms, the canvas is a new element in HTML5, which allows you to draw graphics using JavaScript. It can be used to render text, images, graphs, rectangles, lines gradients and other effects dynamically. Drawing on the canvas is via the canvas 2D API. This API contains a plethora of functions that give you the power to draw pretty much anything you like on the canvas. Currently, the canvas supports a 2D surface, not 3D. So what does a canvas look like? Not much. See for yourself.
The code above will render a canvas in the browser, but because the canvas is empty, you won’t see anything. Let’s add a border so you can see more clearly. The image below shows the canvas with a black border.
Read more: DZone HTML5 Zone
QR: 