What kinds of interactive drawing technology are practical for web use?
July 3, 2009 by Question
Filed under Tech Answers
Java? AJAX with GD? I’d prefer rubberbanding capabilities, but that may be asking a bit much. Oh, and don’t bother mentioning anything that’s not open source. Preferably portable among browsers.
I should qualify this further by mentioning that I’m not interested in creating art. Just mainly the lines and text used in interfaces like ChemDraw.
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>