View Full Version : Vector Based Drawing Script

10-05-2008, 03:04 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 (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!

<script type="application/x-javascript">

var pressed = false;

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);

#canvas {
border: 1px solid black;
<canvas id="canvas" width="300" height="300"></canvas>

10-05-2008, 03:30 PM

is this the sort of thing?