Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Vector Based Drawing Script

    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 draw() {
    	var canvas = document.getElementById("canvas");
    	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 (30, 30, 55, 50);
    }
    
    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>

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,536
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •