erase line in canvas with image background - html5-canvas

Question

i'm looking for a way to erase drawing lines in canvas without erasing my background image.
when i tried using white color i get white line on the image.
i thought about making transparent line but i don't think that's possible.
on saving the canvas with toDataURL() i want to save the drawing with the background.
this is how i set background image:
var background = new Image();
background.src = "pizza.png";
background.onload = function(){
context.drawImage(background,0,0);
}

Answer 1

You can "erase" with Compositing, but it's not recommended for lines
You can use compositing to "erase" a previously drawn line by redrawing it with globalCompositeOperation='destination-out'. This causes the previous line to become transparent pixels. Then you can reapply the background image over just the transparent pixels using globalCompositeOperation='destination-over'.
But there's a problem with lines. The problem with "erasing" lines is that canvas will automatically apply anti-aliasing to every line. That added anti-aliasing is difficult to remove.
The better (more typical) way of erasing canvas lines drawn over a background is to redraw everything:
Save all line definitions in an array (eg lines[]),
To remove line(s), remove their definitions from the lines[] array,
Erase the whole canvas,
Redraw the background,
Redraw all lines still in the lines[] array.
Here's annotated code and a demo:
// canvas vars
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// save line definitions
var lines=[
{x0:75,y0:50,x1:200,y1:100,color:'red'},
{x0:75,y0:75,x1:200,y1:100,color:'green'},
{x0:75,y0:100,x1:200,y1:100,color:'blue'},
{x0:65,y0:50,x1:65,y1:200,color:'green'},
]
// load the background
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/multple/bk.png";
function start(){
// draw the first time
draw();
// remove green lines on button click
$('#go').click(function(){ remove('green'); });
}
function draw(){
// clear canvas
ctx.clearRect(0,0,cw,ch);
// redraw background
ctx.drawImage(img,0,0);
// redraw all lines still in lines[]
ctx.lineWidth=3;
for(var i=0;i<lines.length;i++){
var l=lines[i];
ctx.beginPath();
ctx.moveTo(l.x0,l.y0);
ctx.lineTo(l.x1,l.y1);
ctx.strokeStyle=l.color;
ctx.stroke();
}
}
function remove(color){
for(var i=lines.length-1;i>=0;i--){
if(lines[i].color==color){lines.splice(i,1);}
}
draw();
}
body{ background-color: ivory; }
#canvas{border:1px solid red; margin:0 auto; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button id=go>Remove green lines</button>
<br>
<canvas id="canvas" width=300 height=300></canvas>