HTML5 canvas slide show issue - 【StackMirror】|javascript|html5|canvas|slideshow

I have a slideshow that I am triggering with a call from a link. The slideshow is working well. I am having problems stopping AND clearing the slideshow. I have a temporary link that I am calling the stopShow function that is stopping the show, but is not clearing it so I can then redisplay other items.

// JavaScript Document

    var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
    var showCanvas = null;
    var showCanvasCtx = null;
    var img = document.createElement("img");
    var currentImage = 0;
    var revealTimer;
    var stopShow = 0;
    var slideTImer;

    function slideShow() {
        if (!stopShow){
            showCanvas = document.getElementById('Canvas1');
            showCanvasCtx = showCanvas.getContext('2d');

            //clear canvas
            showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);

            //set image size and call switch function
            img.setAttribute('width','500');
            img.setAttribute('height','400');
            switchImage();

            //start the animation
            slideTimer = setInterval(switchImage,3000);
        }
    }

    function switchImage() {
        //set img element source property to images in slideshow
        img.setAttribute('src',imagePaths[currentImage++]);
            //if past the last image, loop
            if (currentImage >= imagePaths.length)
                currentImage = 0;

            //fade into image by 10th of full saturation
            showCanvasCtx.globalAlpha = 0.1;
            revealTimer = setInterval(revealImage,100);
    }

    function revealImage() {
        showCanvasCtx.save();
        showCanvasCtx.drawImage(img,100,0,500,400);
        showCanvasCtx.globalAlpha += 0.1;
        if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
        showCanvasCtx.restore();
    }


    function stopSlideShow() {
        //alert('stop show');
        clearInterval(slideTimer);
        clearInterval(revealTimer);
        stopShow=1;

        showCanvas = document.getElementById('Canvas1');
            showCanvasCtx = showCanvas.getContext('2d');

            //clear canvas
            showCanvasCtx.clearRect(0,0,showCanvasCtx.canvas.width,showCanvasCtx.canvas.height);

    }

2012-04-03 22:02
by Prostang

I solved the issue. I cannot answer my own question. I would like to post the answer just in case it can help someone else out. I will post answer tomorrow - Prostang 2012-04-03 22:27

This is wrong!

showCanvasCtx.canvas.width

The object model of the canvas works this way:

Canvas -> Context

the width and height parameters are not in the Context but in the Canvas itself. So, considering you got them this way in your code:

showCanvas = document.getElementById('Canvas1');
showCanvasCtx = showCanvas.getContext('2d');

you should get the dimensions of the canvas like this:

showCanvas.width
showCanvas.height

2012-04-03 22:31
by Saturnix

thanks for the correction. I will make the changes - Prostang 2012-04-04 16:22

By removing if (!stopShow){ call, and clearing the canvas in the stopSlideShow function, the function works as desired. It was necessary to set the globalAlpha to 1 in the stopSlideShow function. The ending code looks like this:

// JavaScript Document

    var imagePaths = ["_sites/BBB_homepage.png","_sites/CabezonKidsDental_homepage.png","_sites/djer_homepage.png","_sites/enchanted_homepage.png","_sites/JoeSSausage_homepage.png","_sites/MMCS_homepage.png","_sites/mySRB.png","_sites/PHCP_homepage.png","_sites/smilesforkidsnm_homepage.png","_sites/t2consulting_homepage.png","_sites/Upward_homepage.png","_sites/Webb_based_homepage.png"];
    var showCanvas = null;
    var showCanvasCtx = null;
    var img = document.createElement("img");
    var currentImage = 0;
    var revealTimer;
    var stopShow = 0;
    var slideTImer;

    function slideShow() {
            showCanvas = document.getElementById('Canvas1');
            showCanvasCtx = showCanvas.getContext('2d');

            //clear canvas
            showCanvasCtx.clearRect(0,0,showCanvas.width,showCanvas.height);

            //set image size and call switch function
            img.setAttribute('width','500');
            img.setAttribute('height','400');
            switchImage();

            //start the animation
            slideTimer = setInterval(switchImage,3000);
    }

    function switchImage() {
        //set img element source property to images in slideshow
        img.setAttribute('src',imagePaths[currentImage++]);
            //if past the last image, loop
            if (currentImage >= imagePaths.length)
                currentImage = 0;

            //fade into image by 10th of full saturation
            showCanvasCtx.globalAlpha = 0.1;
            revealTimer = setInterval(revealImage,100);
    }

    function revealImage() {
        showCanvasCtx.save();
        showCanvasCtx.drawImage(img,100,0,500,400);
        showCanvasCtx.globalAlpha += 0.1;
        if (showCanvasCtx.globalAlpha >= 1.0) clearInterval(revealTimer);
        showCanvasCtx.restore();
    }


    function stopSlideShow() {
        //alert('stop show');
        clearInterval(slideTimer);
        clearInterval(revealTimer);
        stopShow=1;
        img.setAttribute('src',100);

        showCanvas = document.getElementById('Canvas1');
            showCanvasCtx = showCanvas.getContext('2d');
            showCanvasCtx.globalAlpha=1;
    }

2012-04-04 16:24
by Prostang