Skip to content Skip to sidebar Skip to footer
Home / Canvas / Html / Html5 Canvas / Javascript

Simplest Slideshow In Html5 Canvas, Canvas.context.clearrect Not Working With Settimeout

Post a Comment
Here is a code of a very simple slideshow, that should show 4 images in 4 seconds, one image per second. Instead, I get a 4-second delay and then all the images get drawn on top of

Solution 1:

You have a few issues with that, including naming your image variables wrong.

Try this:

// 4 imagesvar image0 = newImage();
image0.src = "http://placekitten.com/200/300";
var image1 = newImage();
image1.src = "http://placekitten.com/205/305";
var image2 = newImage();
image2.src = "http://placekitten.com/300/400";
var image3 = newImage();
image3.src = "http://placekitten.com/800/600";
// array of 4 images
images = newArray(image0, image1, image2, image3);

// global counter and canvasvar counter = 0, ctx, interval;

// this is the main functionfunctiondraw(){
    myCanvas = document.getElementById('myCanvas');
    ctx = myCanvas.getContext('2d');
    interval = setInterval(draw_next_image, 1000);
}

// this is the function called after each timeout to draw next imagefunctiondraw_next_image(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
    ctx.drawImage(images[counter], 0, 0);
    counter++;
    if (counter==images.length) {counter=0;}
}

window.onload = draw;

See: http://jsfiddle.net/8c9MM/1/ for example. You can also pause the slideshow since we're assigning interval to the setInterval() function

Solution 2:

How about this.

HTML

<!DOCTYPE HTML><html><head><title>Slider</title><metacharset="utf-8"><linktype="text/css"rel="stylesheet"href="css/main.css"></head><body><canvasid="canvas"width="600"height="400"></canvas><scripttype="text/javascript"src="js/slider.js"></script></body></html>

Javascript

// The 3 imagesvar im1 = newImage();
im1.src = "img/kitten1.jpg";
var im2 = newImage();
im2.src = "img/kitten2.jpg";
var im3 = newImage();
im3.src = "img/kitten3.jpg";

// Starting position of the 3 imagesvar x1 = 0;
var x2 = -600;
var x3 = -1200;

var counter = 0;
var img_count = 0;

// Canvas
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
//This draws the first image when the page is loaded
ctx.drawImage(im1, x1, 0);

functionsliderMove() {
    if(counter <= 590) {
        x1+=10;
        ctx.drawImage(im1,x1,0);
        x2+=10;
        ctx.drawImage(im2,x2,0);
        x3+=10;         
        ctx.drawImage(im3,x3,0);


        counter+=10;
    }
    else {
        counter = 0;
        img_count++

        if(img_count == 1) {
            x1 = -1200;
        }elseif(img_count == 2) {
            x2 = -1200;
        }elseif(img_count == 3) {
            x3 = -1200;
        }
        // This stops move_loop once counter gets to 600clearInterval(move_loop);
    }
}
functionmoveImg() {
//This part moves all of the images 20px to the right every 10ms
    move_loop = setInterval(sliderMove, 10);
    if(img_count > 2) {
        img_count = 0;
    }
}
// This executes the moveImg function every 5 seconds
image_loop = setInterval(timer, 5000);

Sorry if the codes not very organized. This is the first time that I have created anything with javascript.

Post a Comment for "Simplest Slideshow In Html5 Canvas, Canvas.context.clearrect Not Working With Settimeout"