CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Jis Maxi
Jis Maxi

Reputation: 226

Pixel issue when drawing on images - html5 canvas

First of all here my full code on jsfiddle: https://jsfiddle.net/f5z8qtcp/13/

Reproducing my problem:

Click in the image and drag your mouse randomly without releasing the right button of your mouse.

You will see that it leave traces on the image !

How to clear all traces without reloading the image at each time (This will lag my browser for bigger size images) ?

The idea is to clear the trace at each time we add new rectangle but without reloading image.

I tried with:

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

No effect ... and this will remove the rectangles.

Any suggestion please ?

Upvotes: 1

Views: 49

Answers (1)

mitch
mitch

Reputation: 2245

You are drawing on image while mouse moving, you can't in simple way undo it, when someone for example make smaller his selection. The fastest way to fix it is just using some div over image. After mouse release - then remove div and draw on image final selection.

Upvotes: 1

Related Questions