14

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?

Draco
  • 16,156
  • 23
  • 77
  • 92

7 Answers7

26

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.

6502
  • 112,025
  • 15
  • 165
  • 265
  • Now that is cool :) I would never have known you could do rendering like that without 3rd party libs. Btw where can I find tutorials on how to code those type of renderings? – Draco Sep 09 '11 at 14:01
  • On the web--try searching for something like "HTML 5 canvas demo". – Dave Newton Sep 09 '11 at 16:52
  • 4
    @Draco: Ok... here is a secret for you. "3rd part libraries" in javascript are just made up of javascript code. Really. You can write with javascript anything that a javascript "3rd part library" can do. There's no magic... just code. The techniques used in my old assembler torus demo date back from when 3d rendering was done in software by drawing all needed pixels. Javascript torus uses instead canvas 2d primitives that are indeed often hardware accelerated. See e.g. http://stackoverflow.com/questions/4774172/image-manipulation-and-texture-mapping-using-html5-canvas/4774298#4774298 – 6502 Sep 10 '11 at 08:34
5

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

Oded
  • 489,969
  • 99
  • 883
  • 1,009
4

You can't draw on arbitrary elements.

Dave Newton
  • 158,873
  • 26
  • 254
  • 302
3

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.

bjornd
  • 22,397
  • 4
  • 57
  • 73
2

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

DanBeale
  • 310
  • 4
  • 15
jmtd
  • 1,223
  • 9
  • 11
1

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

Alex
  • 1,068
  • 8
  • 23
0

Drawing using

<canvas>

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

<img>

Will take much longer.

user939222
  • 17
  • 3