Comments on: What kinds of interactive drawing technology are practical for web use? http://www.ziatech.com/what-kinds-of-interactive-drawing-technology-are-practical-for-web-use/ technology news in the internet Wed, 21 Oct 2009 17:46:30 +0000 http://wordpress.org/?v=2.8.4 hourly 1 By: montag http://www.ziatech.com/what-kinds-of-interactive-drawing-technology-are-practical-for-web-use/comment-page-1/#comment-388 montag Fri, 03 Jul 2009 21:40:46 +0000 http://www.ziatech.com/what-kinds-of-interactive-drawing-technology-are-practical-for-web-use/#comment-388 You should look into the Canvas element in the HTML 5 spec. It has been supported by FF (1.5+) and Safari since '05ish, and there is a a script that was created by google to effectively give IE canvas support. Canvas is an html element that actually allows you to use javascript to draw things. IE for a long time (IE5) has supported VML(vector markup language). The script that the guys at google created is basically a compatability layer, so you can use canvas like normal in all the good browsers, and in IE it gets translated to VML (the example below obviously doesn't include the IE support). Sample Code: <html> <head> <script type="application/x-javascript"> function draw() { var canvas = document.getElementById("canvas"); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (40, 30, 55, 50); } } </script> </head> <body onload="draw();"> <canvas id="canvas" width="150" height="150"></canvas> </body> </html> You should look into the Canvas element in the HTML 5 spec. It has been supported by FF (1.5+) and Safari since ‘05ish, and there is a a script that was created by google to effectively give IE canvas support.

Canvas is an html element that actually allows you to use javascript to draw things.

IE for a long time (IE5) has supported VML(vector markup language). The script that the guys at google created is basically a compatability layer, so you can use canvas like normal in all the good browsers, and in IE it gets translated to VML (the example below obviously doesn’t include the IE support).

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

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

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

]]>