ansaurus

Question

Answer 1

+1 A:

OK, I've found the source of the problem. The original is here:

The fixed version is here:

Basically, the issue was that you weren't calculating your X and Y vars correctly. .offsetX and .offsetY calculate the x and y position relative to the element's direct ancestor (which in this case was the body of the page). You can see this by alerting the x and y values on mouseover. Anyway, what you have to do instead is this:

var o = $(this).offset(),
    x = (ev.pageX - o.left),
    y = (ev.pageY - o.top);

There were also a few other problems with your code that I've changed. First of all, you weren't beginning new paths for each canvas, so when you re-entered the canvas, it would lineTo(x, y) from where the line had left off. In order to solve this, I made your mouseout event look like this:

.mouseout(function() {
    c=false;
})

Now it will begin a new path whenever it enters a new canvas.

The third thing I changed was to make it so that it only creates the contexts once on document ready. I imagine this saves a little bit of processing. So I added this line in the global scope:

var contexts = [];

And this method in your $('.can') method chain:

.each(function(el) {
    id = this.id;
    contexts[id] = this.getContext('2d');
})

So everywhere else in your code, you can reference it like this:

contexts[this.id].beginPath();

And now it works.

treeface 2010-10-29 00:15:29

Thanks! Clever solution :)

nooga 2010-10-29 09:21:53

ansaurus

tags:

views:

answers:

Seamless drawing in multiple canvas.

related questions