[whatwg] Canvas should be script-only, not an HTML element

Sat May 28 08:27:13 PDT 2005

Creating a non-semantic <canvas> element as the only element that can
be drawn on is backwards. Instead, a scripting interface to drawing
should take any element as a context node. So instead of this [1]:

    <html>
     <head>
      <script type="application/x-javascript">
    function init() {
     var canvas = document.getElementById("canvas");
     var ctx = canvas.getContext("2d");

     ctx.fillStyle = "rgb(200,0,0)";
     ctx.fillRect (10, 10, 50, 50);

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
     ctx.fillRect (30, 30, 50, 50);
    }
      </script>
     </head>
     <body onload="init()">
       <canvas id="canvas" width="300" height="300"></canvas>
     </body>
    </html>

I propose this:

    <html>
     <head>
      <script type="application/x-javascript">
    function init() {
     var canvas = new Canvas(document.getElementById("canvas"));
     var ctx = canvas.getContext("2d");

     ctx.fillStyle = "rgb(200,0,0)";
     ctx.fillRect (10, 10, 50, 50);

     ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
     ctx.fillRect (30, 30, 50, 50);
    }
      </script>
     </head>
     <body onload="init()">
       <div id="canvas" width="300" height="300"></div>
     </body>
    </html>

The significant changes are that the scripting canvas is not a
document node and that the element drawn on is a DIV.

I only proposed a minimal change, but if this method of drawing is
used over a canvas element, the script could be simplified to replace
getContext() with:

    var ctx = new 2DCanvas(document.getElementById('canvas'));

[1]: http://developer-test.mozilla.org/docs/Drawing_Graphics_with_Canvas#A_Simple_Example