Why use the HTML 5 Canvas tag?

Forgive me my ignorance but I am very new to the HTML 5 arena and never worked with graphics using Javascript.

I was doing some reading and came across the Canvas tag and the source stated that the canvas tag acts as a graphics container and is used to render graphics on the webpage by the use of Javascript.

My questions is, why would I need to use Canvas as a placeholder to render graphics instead of using some other arbitrary tag that can be used as a graphics placeholder for example?

Answers


A <canvas> tag is exactly like an <img> tag, with the difference that instead of loading the image from the network you can draw it yourself with javascript code. You can draw lines, circles, filled polygons, gradients and matrix-transformed pictures. You can also redraw the canvas content in a loop to make an animation.

To see what you can do with a plain canvas 2d (no webgl, just standard 2d rendering) take a look at this small demo or look at this video if your browser is too old and doesn't support canvas.

It's pure javascript, nothing loaded from the network, everything is computed in the browser, including the texture and the raytraced image used for envmapping part. All in a single 4Kb html file.

Do you really think you can do the same using regular <div>s ?

EDIT:

For a much simpler demo with a readable source you can check out this rotating icosahedron.


Canvas is intended for graphics manipulation, whereas div isn't. Semantically, you should be using Canvas.


You can't draw on arbitrary elements.


Canvas allows you to manipulate pixels with acceptable speed. You can draw various shapes, set colors for pixels etc. With div you can only render standard HTML elements.


DIV is a container for other tags. CANVAS is a container for pixels.

Whilst it is (probably) possible to do everything you want to do drawing-wise inside a plain DIV, with CANVAS the browser knows semantically that the area is going to contain graphics and can use that information accordingly.

Browsers support a variety of drawing routines for CANVAS natively, whereas you'd have to cook your own entirely in JS for DIV.

A really good resource for information on the HTML5 canvas is http://diveintohtml5.ep.io/canvas.html


Why use canvas: 1- canvas is secure to use and compatible with multi platform. 2- it have a lot of ready function to use in animation. 3- you can play with speed, pixels, colors. 4- you can save result of canvas as image. 5- you can implement professionally games with canvas. check here

simply it is act like flash but with no plug-ins.

usefaul libraries to use: - easel js: flash like library - processing js : open souece animation library


Drawing using

<canvas> 

Will load straight away when entering a webpage with this in use, where an

<img>  

Will take much longer.


Need Your Help

objects as keys in python dictionaries

python dictionary

I'm trying to use an object as a key in a python dictionary, but it's behaving in a way that I can't quite understand.

How to detect new element creation in jQuery?

jquery javascript-events

Lets say I have the following code that returns number of anchor elements on a page: