HTML5 Image Buffer

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!

Please include a working chunk of code that you are using to move the image. We can't really comment until we see what actual code you are using. — jfriend00, Dec 23 '11 at 23:25

score 4 · Answer 1 · answered Dec 24 '11 at 00:18

Well, what you really need to do is to create a render loop with javascript using requestAnimationFrame(), and render with the canvas element. Here's a really basic example of rendering with HTML5:

<!DOCTYPE html>
<html>
    <body>
        <canvas id="gameCanvas" width="800px" height="600px"></canvas>
        <script type="text/javascript">
            var canvas = document.getElementById('gameCanvas');
            var context = canvas.getContext('2d');
            var myImage = new Image();
            var myImage.onload=function(){init();};
            var myImage.src='location/of/image.png';
            var imageX = 0, imageY = 0;

            function render()
            {
                window.requestAnimationFrame(render);

                // clear canvas
                canvas.width = canvas.width;

                context.drawImage(myImage, imageX, imageY);

                imageX++;
                imageY++;
            }

            function init()
            {
                window.requestAnimationFrame(render);
            }
        </script>
    </body>
</html>

There will never be flicker when you're rendering through a canvas since the browser is already double buffering that rendering surface; and manually double buffering the canvas will actually produce a significant drop in framerate. What you're probably encountering (if you're rendering through a canvas) is tearing of the frame. Using requestAnimationFrame will resolve the tearing problem by essentially v-syncing the render (since it waits until the end of code execution to render).

Hopefully this will help you get started on the right path for rendering with HTML5.

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

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

edited May 23 '17 at 12:11

Community

1
1

answered Dec 23 '11 at 23:40

New Guy

8,606
1
15
12

thank you very much! I didn't understand completely the things explained in the post you recomended, but thnaks to ur suggestion I searcheed for double buffering tutorials and found this which was particulary useful: http://www.felinesoft.com/blog/index.php/2010/09/accelerated-game-programming-with-html5-and-canvas/ – Vlad Otrocol Dec 23 '11 at 23:49

HTML5 Image Buffer

2 Answers2