Javascript canvas image flickers with mousemove call

Question

I'm trying to call an image(redraw) whenever I move my mouse, but the problem is image sometimes inconsistently flickers when moving mouse and this is really annoying.

I tried to find answers from other Stack Overflow posts but they are not quite similar to mine.

I simplified my code so its easy to understand.

The thing is I have to call an image whenever mouse is moved so it works with other codes I wrote.

The reason that I wrote code this way is that so img.src can be changed whenever user clicks certain position on the page.

Going into further details it basically passes object with image path that changes img.src when user clicks.

The webpage is constantly changing so the mousemove is necessary.

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

canvas.onmousemove = mousemove;

function mousemove(e){

    ctx.clearRect(0,0,canvas.width,canvas.height);
    var img = new Image();   // Create new img element
    img.addEventListener("load", function() {

       ctx.drawImage(img,100,100,400,400);
    }, false);

    img.src = 'images/reception.jpg';

}

[There are](http://stackoverflow.com/questions/33749923/image-flickers-when-mouse-moves-in-html-canvas) [already duplicates](http://stackoverflow.com/questions/11506619/image-flickers-during-drag-in-canvas) of this question. The problem is that at each mousemove you are loading a new Image. The solution is to load your image once, out of the mousemove event handler and only call the canvas drawing operations in the mousemove. — Kaiido, Nov 25 '15 at 06:35

Canvas · Accepted Answer · 2015-11-25T10:39:57.060

jsFiddle : https://jsfiddle.net/efhf7oeo/1/

javascript

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

canvas.height = window.innerHeight;
canvas.width = window.innerWidth;

var images = new Array();
var currentLocation = 0;
var totalImages = 7;

for (var i = 0; i < totalImages; i++) {
    var img = new Image;
    switch (i) {
        case 0:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/mewtwo.png";
            break;
        case 1:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/keldeo-ordinary.png";
            break;
        case 2:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/darkrai.png";
            break;
        case 3:
            img.src = "http://floatzel.net/pokemon/black-white/sprites/images/5.png";
            break;
        case 4:
            img.src = "http://vignette1.wikia.nocookie.net/capx/images/0/03/001.png/revision/latest?cb=20140322003659";
            break;
        case 5:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/absol.png";
            break;
        case 6:
            img.src = "http://img.pokemondb.net/sprites/black-white/normal/dewgong.png";
            break;
        case 7:
            img.src = "http://orig05.deviantart.net/e770/f/2013/008/c/6/froakie_by_baconboy914-d5qvrjo.gif";
            break;
    }

    images.push(img);
}

function mousemove(e) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(images[Math.floor((Math.random() * (totalImages - 1)) + 1)], 100, 100, 400, 400);
}

canvas.onmousemove = mousemove;

I have created an array of images, we first populate them then you can just call on them when need. I have just done this and tested it in Chrome and it works fine for me

nice blastoise image, anyway I might have worded my question wrong. what I need canvas to do redraw image every time mouse moves so that the img.src changes the moment mouse moves. Actually my code above works perfectly on every other browser except chrome it must be one of those chrome thing. — Paul, Nov 25 '15 at 10:26

score 0 · Answer 2 · answered Nov 25 '15 at 10:36

0

I found a solution but I'm not sure why this works and I don't think its full proof but this is what I did.

instead of this

function mousemove(e){

    ctx.clearRect(0,0,canvas.width,canvas.height);
    var img = new Image();   // Create new img element
    img.addEventListener("load", function() {

       ctx.drawImage(img,100,100,400,400);
    }, false);

    img.src = 'images/reception.jpg';

}

you put img.src just over clearRect.

like this

img.src = 'images/reception.jpg';
ctx.clearRect(0,0,canvas.width,canvas.height);

answered Nov 25 '15 at 10:36

Paul

39
1
8

you have now told the img.src to be the new image, however you still may get a flicker due to a slow connection, you should preload all images and then draw them by accessing a collection of images. I have a simple answer below however it doesn't say when all images have loaded – Canvas Nov 25 '15 at 10:48

Javascript canvas image flickers with mousemove call

2 Answers2