Canvas - delete drawimages

Question

In my canvas adds 2 images. 1 images is "background canvas". 2 image is cut from 1 image and add to background.

Add background (1 images):

img.onload = function() {
     img2= new Image();
     img2.src=e.target.result;
     canvas.width  = this.width;
     canvas.height = this.height;  
     context.drawImage(img2,0,0);                              
}

Add 2 images:

var c=document.getElementById('obrazek');
var ctx = c.getContext("2d");
var img1 = new Image();
img1.src =$('#blur').getCanvasImage();
img1.onload = function(){
    ctx.translate(xStart,yStart);  
    ctx.beginPath();
    context.arc(0, 0, d, 0, 2 * Math.PI, false);
    ctx.clip();
    ctx.drawImage(img1,-xStart,-yStart);
}

I need clean background. I want delete 2 image and load again background.

My clean:

context.drawImage(img2,0,0);

After cleaning background, I see:

enter image description here

2 image is wrong removed, why?

score 1 · Accepted Answer · answered Feb 17 '14 at 15:27

You need to clear your clipping region or else all further draws will be restricted to your circle.

save the unclipped context
do your clipped drawing
restore the context to its unclipped state

Like this:

function drawAll(backgroundImage,topImage,xStart,yStart,d){

      // clear the whole canvas of all images

      ctx.clearRect(0,0,c.width,c.height);

      // save the unclipped context

      ctx.save()

      // draw the background image (not clipped)

      ctx.drawImage(backgroundImage,0,0);

      // create a clipping circle

      ctx.arc(xStart,yStart,d,0,Math.PI*2);
      ctx.clip();

      // draw the top image restricted to the clipping circle

      ctx.drawImage(topImage,xStart-topImage.width/2,yStart-topImage.height/2);

      // restore the context (clears the clipping circle)

      ctx.restore();
}

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

The issue is that you need to clear your context before you redraw

See related issue:

How to clear the canvas for redrawing

edited May 23 '17 at 12:14

Community

1
1

answered Feb 17 '14 at 14:36

BillyBigPotatoes

1,286
11
23

I tested it. Doesn't work. In my opinion removed only background and 1/4 circle. – viko Feb 17 '14 at 14:42
Did you try getting a new context var ctx = c.getContext("2d"); – BillyBigPotatoes Feb 17 '14 at 14:46
Yes. See screenshot. Clean is only 1/4 circle (at the bottom-right) and next is cut 1 image... When i do: ctx.clearRect, it doesn't help. I want delete circle and load again background. – viko Feb 17 '14 at 15:08

score 0 · Answer 3 · answered Feb 17 '14 at 16:00

0

This too work:

ctx.clearRect(0,0, c.width, c.height); 
var w = c.width;
c.width = 1;
c.width = w;
context.clearRect ( 0 , 0 , canvas.width , canvas.height );
context.drawImage(img2,0,0);

answered Feb 17 '14 at 16:00

viko

381
4
19

Canvas - delete drawimages

3 Answers3