scrolling/sliding background in html5 canvas

Question

I am building a canvas game. In this i want to slide the background image in a loop. I don't know how to do this using javascript. I will be using single image which will slide continuously into the background. Thanks in advance.

Answer 1

Theres a few ways to achieve this the first one will take a performance hit using putImageData, the second method just uses drawImage. Also note the 2nd method has the code to make it go either from left to right, or right to left.

http://www.somethinghitme.com/projects/bgscroll/

var ctx = document.getElementById("canvas").getContext("2d"),
    canvasTemp = document.createElement("canvas"),
    scrollImg = new Image(),
    tempContext = canvasTemp.getContext("2d"),
    imgWidth = 0,
    imgHeight =0,
    imageData = {},
    canvasWidth = 600,
    canvasHeight = 240,
    scrollVal = 0,
    speed =2;

    scrollImg.src = "citybg.png";
    scrollImg.onload = loadImage;

    function loadImage(){
        imgWidth = scrollImg.width,
        imgHeight = scrollImg.height;
        canvasTemp.width = imgWidth;
        canvasTemp.height =  imgHeight;    
        tempContext.drawImage(scrollImg, 0,0, imgWidth, imgHeight); 
        imageData = tempContext.getImageData(0,0,imgWidth,imgHeight);
        render();                
    }

    function render(){
        ctx.clearRect(0,0,canvasWidth,canvasHeight);

        if(scrollVal >= canvasWidth-speed){
            scrollVal = 0;
        }

        scrollVal+=speed;

        // This is the bread and butter, you have to make sure the imagedata isnt larger than the canvas your putting image data to.
        imageData = tempContext.getImageData(canvasWidth-scrollVal,0,scrollVal,canvasHeight);
        ctx.putImageData(imageData, 0,0,0,0,scrollVal, imgHeight);
        imageData = tempContext.getImageData(0,0,canvasWidth-scrollVal,canvasHeight);
        ctx.putImageData(imageData, scrollVal,0,0,0,canvasWidth-scrollVal, imgHeight);

        setTimeout(function(){render();},10);
    }

2nd Method uses the same code as above, just change these two functions to the following.

http://www.somethinghitme.com/projects/bgscroll/scrolldrawimage.html

function loadImage(){
    imgWidth = scrollImg.width,
    imgHeight = scrollImg.height;
    canvasTemp.width = imgWidth;
    canvasTemp.height =  imgHeight;    
    render();                
}

function render(){
    ctx.clearRect(0,0,canvasWidth,canvasHeight);

    if(scrollVal >= canvasWidth){
        scrollVal = 0;
    }

    scrollVal+=speed;                   
    ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,scrollVal,imgHeight, 0, 0, scrollVal,imgHeight);
    ctx.drawImage(scrollImg,scrollVal,0,imgWidth, imgHeight);

     // To go the other way instead
     ctx.drawImage(scrollImg,-scrollVal,0,imgWidth, imgHeight);
     ctx.drawImage(scrollImg,canvasWidth-scrollVal,0,imgWidth, imgHeight);

    setTimeout(function(){render();},10);
}