Vector Based Drawing Script

DrOtter · October 5th, 2008, 12:00 PM

Hi everybody - hopefully somebody will be able to help me with this...
I've written a very basic drawing script (see below). The problem is I want to implement vector based drawing, so that each stroke drawn is saved as a vector, and that when you click erase on the line, the whole line disappears. I'm probably not veyr good at explaining it, but an example of what I'm talking about is the msn mesenger handwriting tool.
Another example is on this site.
So - does anybody have any ideas on how to implement this? I'm lost for ideas at the moment, so any help would be much appreciated!
Thanks

Code:

<html>
 <head>
  <script type="application/x-javascript">
  
var pressed = false;
document.onmousemove=mouseMove;
document.onmouseup=mouseUp;
document.onmousedown=mouseDown;

function mouseUp() {
    pressed = false;
}

function mouseDown() {
    pressed = true;
}

function mouseMove(event) {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    ev = event || window.event;

    if (pressed) {
        ctx.fillStyle = "rgb(255,0,0)";
        ctx.fillRect (ev.pageX-canvas.offsetLeft, ev.pageY-canvas.offsetTop, 2, 2);
    }
}

  </script>
 </head>
 <style>
 #canvas {
    border: 1px solid black;
 }
 </style>
 <body>
   <canvas id="canvas" width="300" height="300"></canvas>
 </body>
</html>