CODEWITHSUNDEEP
html5-canvas
user2587454
user2587454

Reputation: 913

erase line in canvas with image background

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

Upvotes: 1

Views: 1407

Answers (1)

markE
markE

Reputation: 105015

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>

Upvotes: 3

Related Questions