Question

I am a beginner programmer in javascript. I don’t use jQuery! And I want to make a simple game.

I am loading multiple images into canvas using

imageObj.onload = function(){}

I am using a keylistener for multiple keypresses so that the images could move on the diagonal while pressing both up and left keys by using smth like this:

function keydown_handler(e){my_key[String.fromCharCode(e.keyCode)] =
true; Move();}

My problem is that when I press the keys and move the images on the canvas the image flickers. I suppose this is because it loads the image every time I press a key. If this is true how can I load an image ONCE into memory and then RECALL that image from memory and change it’s coordinates?

Thank you!

Answer 1

What you are referring to is a very common problem when dealing with animations. The issue has less to do with what is stored in memory and more to do with the way an animation must be redrawn each time something changes. The most common method for avoiding this flickering issue is known as double buffering.

I have never done this using HTML5 specifically but after a quick search I found this article that may help you.

https://stackoverflow.com/a/2864533/594558