Drawing lines in different canvas - html5-canvas

Question

I'm drawing some colored lines in the main big canvas. 3 colors are possible : red, green, blue. For further uses, I have 3 little canvasses (called #canvasR #canvasG and #canvasB) where I draw each line depending its color, for ex. all (and only) the red one in #canvasR. Everything is working perfectly except a big mystery for me : when I'm drawing say a first blue line in main canvas (onmousemove > onmouseup), the second blue line appears in #canvasB... all is correct. But when I want to draw a second blue line somewhere else (second onmousemove > onmouseup sequence) everything is OK in the main canvas but not in the #canvasB: a unwanted new blue line joins the first one and the new one, just like if the first onmouseup was ignored... screenshot:
http://e-vdn.com/4canvas.png
canvas.mousemove(function(e) {
cursorX = (e.pageX - this.offsetLeft);
cursorY = (e.pageY - this.offsetTop);
drawLine();
});
function drawLine() {
// in main canvas:
context.lineTo(cursorX, cursorY);
context.strokeStyle = color;
context.lineWidth = width_brush;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = width_brush*1.5;
context.shadowColor = color;
context.stroke();
// in small canvas:
if (color=='#f00') { ctx = ctxR; }
if (color=='#9f0') { ctx = ctxV; }
if (color=='#00f') { ctx = ctxB; }
ctx.lineTo( (cursorX/4), (cursorY/4) );
ctx.strokeStyle = color;
ctx.lineWidth = width_brush;
ctx.stroke();
}

Answer 1

You have to do context.beginPath with each new stroke or else all previous lines on that context will be redrawn along with your current stroke.
So, for example, assume you do (1) a red stroke and then (2) a blue stroke. Without context.beginPath your red stroke will be redrawn using the current blue pen.
Here's an untested refactoring of your code:
var lastX,lastY;
var lastRedX,lastRedY,lastGreenX,lastGreenY,lastBlueX,lastBlueY;
// in main canvas:
if(lastX){
context.beginPath();
context.moveTo(lastX,lastY);
context.lineTo(cursorX, cursorY);
context.strokeStyle = color;
context.lineWidth = width_brush;
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = width_brush*1.5;
context.shadowColor = color;
context.stroke();
}
lastX=cursorX;
lastY=cursorY;
// in small red canvas:
if (color=='#f00')
if(lastRedX){
addLine(ctxR,lastRedX,lastRedY,cursorX,cursorY);
}
lastRedX=cursorX;
lastRedY=cursorY;
}
// in small V canvas:
if (color=='#9f0')
if(lastGreenX){
addLine(ctxV,lastGreenX,lastGreenY,cursorX,cursorY);
}
lastGreenX=cursorX;
lastGreenY=cursorY;
}
// in small Blue canvas:
if (color=='#00f')
if(lastBlueX){
addLine(ctxB,lastBlueX,lastBlueY,cursorX,cursorY);
}
lastBlueX=cursorX;
lastBlueY=cursorY;
}
function addLine(ctx,lastX,lastY,cursorX,cursorY){
ctx.beginPath();
ctx.moveTo( lastX,lastY );
ctx.lineTo( (cursorX/4), (cursorY/4) );
ctx.strokeStyle = color;
ctx.lineWidth = width_brush;
ctx.stroke();
}