背景代理奇数HTML5画布

Question

I have an 800 by 100 image for the background and I am trying to pull sections from it (like a sprite sheet) to generate a background because I am under the impression that it is an efficient way of doing it(also seems like one that I can toy with and learn to generate backgrounds in the future!)

It is not working though, int he first animation frame ( I found this from slowing it down) it shows half of the entire background image(not the sections that I want to use) then it moves it down presumably 800 pixels and shows it and by the third frame it is gone!

please help :/ thank you!

    var bricks = [0, 1, 1, 1, 1, 2];

    function createBackground() {
        for(var i = 0; i < bricks.length; i++) {
            drawBackground(bricks[i]);
        }

    }
    var bg = new Image();
    bg.src = 'bgsheet2.png';
    var srcX, srcY = 0,srcW = 100,srcH = 100,destX = 0,destY = canvas.height-100,destW = 100,destH = 100;

    function drawBackground(type) {

        switch(type) {
            case 1:
                srcX = 0;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 2:
                srcX = 100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
            case 3:
                srcX = 200;
                destX+=100;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                break;
            default:
                srcX = 300;
                ctx.drawImage(bg,srcX,srcY,srcW,srcH,destX,destY,destW,destH);
                destX+=100;
                break;
        }
    }

     //this is in my main animation loop
    createBackground();

Answer 1

For the efficiency, you have the following common solutions.

1. If the background is static (no moving parts like water or any interaction with it) then you can draw it to an on-screen canvas (a visible canvas) just the one time, but don't clear that canvas. That way your tiles are only processed and drawn the once.

2. The second method, a little more difficult than the first, is to draw sections to an offscreen canvas with the goal of limiting your (re)draws calls.

3. You can also get in to using "dirty rectangles" which is basically the practice of only updating the changed parts of your display. This is by far the hardest solution for efficiency.