Image flickers when mouse moves in HTML canvas

Question

I already looked in these thread 1 and thread 2, but I still got the flickering when the mouse move.

My code:

    function draw(){
    var img = new Imag         


        

Answer 1

I'm assuming you're calling draw for each mousemove.

Mousemove events occur about 30 times a second so there is not enough time to load an image inside a mousemove handler.

Instead, load the image once at the start of your app.

Then ctx.drawImage has enough time to draw that preloaded image during each mousemove event.