Vector Based Drawing Script

Discussion in 'JavaScript' started by DrOtter, Oct 5, 2008.

  1. #1
    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 very good at explaining it, but an example of what I'm talking about is the msn mesenger handwriting tool.
    Another example is on http://www.skrbl.com/87122973
    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

    
    <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>
    
    Code (markup):
     
    DrOtter, Oct 5, 2008 IP