0

I have multiple stacked contexts in a canvas (each will be displaying circles, then deleting cirles, creating new circle in new location on the context). I was testing the feasibility with this code: 

var radius = 10;
cx2 = document.getElementById("myCanvasID").getContext('2d');
cx2.beginPath();
cx2.arc(150, 150, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();

//ctx2.fillColor = "rgba(0-255, 0-255, 0-255, 0-1)"   
cx2.clearRect(0,0,300,300);
//cx2.globalCompositeOperation = "destination-out"
//cx2.fillStyle = 'rgba(0, 255, 0, 0)';
// cx2.fillRect(0, 0, 300, 300);
// cx2.globalCompositeOperation = "destination-in"


cx2.beginPath();
cx2.arc(180, 180, 10, 0, Math.PI*2, true);
cx2.closePath();
cx2.fillStyle = '#6495ED';
cx2.fill();
cx2.lineWidth = 2;
cx2.strokeStyle = '#003300';
cx2.stroke();

The issue with clearRect is that it leaves a white rectangle and I want to have it transparent, as the layer below has a background.

Other layers will be stacked on top and all needs to be transparent, the deleting of the circle and redrawing should not affect this.

I have tried a few other commands, but none have worked so far. clearRect gives me this white rectangle:

enter image description here

https://jsfiddle.net/dorien/tghgsw5g/

dorien
  • 5,265
  • 10
  • 57
  • 116
  • If you could share a JSFiddle or something demonstrating this I think it should be easy to debug. – Russel Simmons Mar 09 '17 at 04:56
  • I've quickly put my code in jsfiddle. Not sure why the image isn't showing, I think it's the same as how I have it. https://jsfiddle.net/dorien/tghgsw5g/ – dorien Mar 09 '17 at 05:07
  • 1
    I tried to make a jsfiddle with the given code, but I have gotten no matching results. clearRect had no issues when used as above.https://jsfiddle.net/vxtrmpk5/ – John Smith Mar 09 '17 at 05:10
  • Possible duplicate of [Clear Canvas Rect (but keep background)](http://stackoverflow.com/questions/5596434/clear-canvas-rect-but-keep-background) – Matt Goodrich Mar 09 '17 at 05:16
  • Perhaps it is because I have set my background as cx1.drawImage(img, 0, 0); of the first context? – dorien Mar 09 '17 at 05:16
  • @dorien I don't see any problems with your fiddle. If I uncomment the clearRect line, it works as expected. Zooming out a bit, I don't think you need to create different contexts for the same canvas element. The contexts don't "stack" as you said. You could have multiple canvas _elements_ that were stacked, if you wanted to though. – Russel Simmons Mar 09 '17 at 05:17
  • I see. So there is no way of keeping the circle on cx1 while erasing cx2. – dorien Mar 09 '17 at 05:19
  • The circles are drawn on the same canvas as the image. The circles pixels overwrite the image in the 2D array of stored pixels, so they aren't recoverable anyways without more extensive changes, such as a separate canvases. See the duplicate post. It looks fine on jsfiddle because the image isn't loaded. @JohnSmith the background you set is on a div and not part of the canvas, so it's kept. – Matt Goodrich Mar 09 '17 at 05:25
  • In my full code it is still giving me the white rectangle though (regardless of the layers thing). I wish the img function would work in jfiddle. Any reason for that? Otherwise I could show: https://jsfiddle.net/dorien/tghgsw5g/3/ – dorien Mar 09 '17 at 05:32

1 Answers1

1

You have one context: .getContext('2d') returns the CanvasRenderingContext2D for the canvas. It does not create new contexts. So, when you cx2.clearRect(0,0,300,300); you're also clearing cx1 because, well, it's the same context.

If you want separate "layers" you need to create separate <canvas>'s and position them on top of each other.

rgthree
  • 7,217
  • 17
  • 21