CODEWITHSUNDEEP
canvashtml5-canvas
MONK
MONK

Reputation: 219

Canvas 'shape artifact' appearing when drawing an image after clear

I'm having a really puzzling canvas artifact / bug in my web application. After clearing the canvas, a circle shape that has been previously cleared reappears when drawing another image to the canvas, but only once. The image has been initialized once like so :

this.image = new Image();
this.image.src = imageroot + image + '.png';

In the debugger I break on each image draw to discover that this shape artifact only appears the first time I draw this image.

Just after first image drawJust after second draw of the same image

context.drawImage(this.image, x - width / 2, z - height / 2, width, height);

It cannot be in the image though, and the subsequent draws of the same image just show that this circle is indeed not in the image that I draw to the canvas. But I am positive that it appears during the call to this function. So it is somehow popping up from somewhere.

I guess I'm doing something wrong somewhere because it is a very strange behavior, but I couldn't locate it and cannot posts hundreds of lines of code, so I would like to know what kind of misuse / wrongdoing could cause such an artifact to appear in such an unexpected context (calling drawImage), so that I have at least a trail to follow to catch this bug.

Upvotes: 1

Views: 579

Answers (1)

user1693593
user1693593

Reputation:

Remember to use beginPath() to clear all previous paths.

When you clear the canvas simply call this method and the previous paths won't be re-rendered next time you stroke or fill.

Upvotes: 2

Related Questions