I have two canvases: a buffer and a display canvas whose context gets a drawImage() call with the buffer canvas. I clearRect() both canvases before adding new objects and calling drawImage(), but both display all previously-added objects. This is the object-adding code (check out the full JSFiddle below):
ctx.clearRect(0, 0, 500, 500);buf.clearRect(0, 0, 500, 500);img.src = bufCanvas.toDataURL();buf.fillStyle = 'hsl('+ ~~(Math.random()*360) +', 100%, 70%)';buf.rect(Math.random()*w, Math.random()*h, 20, 20);buf.fill();ctx.drawImage(bufCanvas, 0, 0);JSFiddle: http://jsfiddle.net/3movoayv/10/
The top is the buffer (click your mouse there to generate new rects), the middle is the display canvas that I copy the buffer to, and the bottom is an img element that displays the contents of the buffer canvas after I call clearRect() (which always correctly displays nothing).
What's going on here?
