- From: Lenny Domnitser <ldrhcp@gmail.com>
- Date: Sat, 28 May 2005 11:27:13 -0400
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
Received on Saturday, 28 May 2005 08:27:13 UTC