1

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 Image();
    img.src = "/Sample/Icons/sample.png";


    img.onload = function () {     
        ctx.drawImage(img, X1, Y1, 25, 25);                       
    };
  }

Hopefully someone can give me an idea or solution on how to solve my flickering problem.

Community
  • 1
  • 1
ajbee
  • 3,511
  • 3
  • 29
  • 56
  • 2
    Obviously we need more of your code to help you with your flickering problem. All your example code does is load and display a single image on the canvas. It has no mousemove code at all! :-O – markE Nov 17 '15 at 05:45
  • the code is too long, but my other tools that used lineTo() is working just this one that uses drawImage(); – ajbee Nov 17 '15 at 05:52
  • use a doublebuffer i.e first draw everything to an offscreen surface and then draw this onto the canvas – Cyclonecode Nov 17 '15 at 08:35
  • http://stackoverflow.com/questions/2795269/does-html5-canvas-support-double-buffering – Cyclonecode Nov 17 '15 at 09:26

1 Answers1

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.

markE
  • 102,905
  • 11
  • 164
  • 176
  • Interesting answer, is there any sample implementation that I can try? – ajbee Nov 17 '15 at 06:14
  • 1
    Here's a previous SO post that illustrates how to preload multiple images: http://stackoverflow.com/questions/31600681/using-images-as-buttons-on-html-canvas/31601615#31601615 – markE Nov 17 '15 at 06:16
  • Thanks mate! I'll try to understand and implement it on mine – ajbee Nov 17 '15 at 06:19