Estoy intentando cerar varias lineas en un canvas,para ser exacto 14 lineas, estoy usando 14 contextos asi:
canvasL2V3 = document.getElementById("canvasL2V3");
ctx1 = canvasL2V3.getContext("2d");
ctx2 = canvasL2V3.getContext("2d");
ctx3 = canvasL2V3.getContext("2d");
ctx4 = canvasL2V3.getContext("2d");
ctx5 = canvasL2V3.getContext("2d");
ctx6 = canvasL2V3.getContext("2d");
ctx7 = canvasL2V3.getContext("2d");
ctx8 = canvasL2V3.getContext("2d");
ctx9 = canvasL2V3.getContext("2d");
ctx10 = canvasL2V3.getContext("2d");
ctx11 = canvasL2V3.getContext("2d");
ctx12 = canvasL2V3.getContext("2d");
ctx13 = canvasL2V3.getContext("2d");
ctx14 = canvasL2V3.getContext("2d");
canvasL2V3.width =1366;
canvasL2V3.height = 768;
Mas adelante tengo un evento mousemove que me trae el contexto al que debe hacerle el movimiento y crear la linea.
$scope.captureCoordinate=function($event){
if($scope.firstSelect){
var ctx="ctx"+contexto;
eval(ctx+'.clearRect(0, 0,'+canvasL2V3.width+','+canvasL2V3.height+');');//se limpia todo lo del contexto
eval(ctx+'.beginPath();');
eval(ctx+'.lineWidth = "1";');
eval(ctx+'.strokeStyle = "purple";'); // Purple path
eval(ctx+'.moveTo('+$scope.left+','+$scope.top+');'); // Purple path
eval(ctx+'.lineTo('+$event.clientX+','+$event.clientY+');'); // Purple path
eval(ctx+'.stroke();'); // Draw it
}
}
ya esta validado que toma el contexto correcto,ya que son variables globales de mi js. El problema es que al crear la linea siempre primero borro el contexto y marco la ultima posicion que dejó,y esta bien,a la hora de marcar la segunda linea,o el segundo contexto(ctx2).
ctx2.clearRect(0, 0,canvasL2V3.width,canvasL2V3.height);
el problema es que no borra el lienzo de ese contexto sino que borra todos; como hago para limpiar el dibujo de cada contexto(ctx1,ctx2,ctx3,ct4...) por separado sin que me vacíe todo?
beginPath
,moveTo
,lineTo
ystroke
del contexto (objeto devuelto por el métodogetContext('2d')
para dibujar las líneas en el lienzo.