Why use <canvas> instead of plain old Javascript?

canvas, html, javascript

Solution

Canvas needs JavaScript to do anything so it isn't really an either or with "plain old JavaScript" See simple example here:

<canvas id='myCanvas' height='200' width='200'><canvas>

You then use JS code to draw on it:

  var canvas = document.getElementById("myCanvas");
  if (canvas.getContext) {
    var context = canvas.getContext("2d");
    context.fillStyle = "rgb(255,0,0)";
    context.fillRect (10, 10, 50, 50);  
  }

Before this in pre-canvas JS days you would have been forced when drawing on screen to use a filled div to make shapes. A simple rectangle or square is easy, but drawing a diagonal line would require a whole lot of single pixel divs and a circle even worse. There are libraries that do this like Walter Zorn's library, which is quite old and well-known. Unless you are supporting some ancient browser this seems not a reasonable way to go.

As people are citing you can run `<canvas>` in most browsers save Internet Explorer which you need a translation library like Explorer Canvas This will translate the canvas code to IE's native VML. However, this is somewhat problematic with anything of any complexity esp. given you rely on IE's slowish JS implementation to do the translation.

Other vector graphics alternatives are the currently hated (sigh) Flash, IE's VML directly coded to and SVG if a browser supports it. There are rumblings that IE9 is going to have SVG which is an interesting development.

What is curious about this teeth nashing about Canvas versus other things (recently Flash of course) is the lack of real discussion about its practical application challenges. Canvas is a really cool technology, but it has 3 significant concerns/challenges (not necessarily in order)

Its text support is very newish so getting a font onto a canvas only works in the latest stuff (in other cases you need HTML/CSS overlays) or nasty hacks to draw the letter forms onto the canvas.

Interactivity is a hack and half. If you want to make a canvas drawing clickable you are forced to use an overlaid image maps or div tags or do some nutty pixel map catching events and figuring out what pixels they hit. A canvas image is a rendered bit map and really not meant to be interacted with how many people want. Google at last year's I/O conference somewhat dances around this question watch: http://www.youtube.com/watch?v=AusOPz8Ww80#t=48m54s&feature=player_embedded The immediate mode API means no "picking" - "canvas won't grow that ability" Their mention of SVG being better skips over performance and compat concerns with that technology, in short an admission and non-answer solution.

No native IE support. Sorry that translation library doesn't cut performance wise it for anything significant and clearly IE is still a browser force whether you like it or not.

However, if you have to pick a non-plugin based drawing tech, canvas even with the IE compat library is clearly better than old filled divs unless you have some need for ancient browser support.

Problem

Original source

Related problems

• What are unusual and creative usages of html5 canvas