CODEWITHSUNDEEP
javascriptcsshtmlcanvas
Vassilis De
Vassilis De

Reputation: 373

Put a photoslider inside canvas tag

I'm trying to create a photoslider in html5 and then put it in a canvas tag. So far I can see the images, but I cannot set the canvas behind them. Could someones please tell me what is going on? Thank you in advance.

HTML:

<html>
<head>
    <script type="text/javascript">
        var step = 1;
        var img = new Array(17);

        for(var i = 1; i <= 17; i++){
            img[i] = new Image();
            img[i].src = "/images/img"+i+".jpg";    //load images
        }
    </script>

    <script type="text/javascript" src="\js\photoSliderController.js"></script>
</head>
<body>
<section id="photoSliderContainer">
        <img name="slide" id="photoSliderControls" src="C:\Users\Vassileios\Dropbox\symmetexw\images\img1.jpg" width="500" height="300"> 
            <script type="text/javascript">
                slideImages();
            </script>
        </img>
        <canvas id="photoSliderViewport">
            Your browser does not support the HTML5 canvas tag.
        </canvas>
    </section>
</body>
</html>

CSS:

#photoSliderViewPort{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
width: 800px;
height: 800px;
background:rgba(75,75,186,1);
}

#photoSliderControls{
float: right;
margin-top: 3%;
margin-right: 0%;
margin-bottom: 95%;
margin-left: 24%;
z-index:1;
}

JS:

function slideImages(){
document.images.slide.src = eval("img["+step+"].src");
    if(step<17)
        step++;
    else
        step=1;
setTimeout("slideImages()",3000);
}

Upvotes: 1

Views: 65

Answers (1)

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

var canvas = document.getElementById('photoSliderViewport');
var ctx = canvas.getContext('2d');
var step = 0; // Start Array key (0 indexed)
var images = []; // Array of image paths
var nOfImages = 5; // Set here the desired number of images

canvas.width = 800;
canvas.height = 800;

// Populate array with paths;
for(var i=1; i<=nOfImages; i++){
  images.push("http://placehold.it/800x800/ccc&text="+i+".jpg");
}

console.log(images);

function slideImages(){
  var img = new Image();
  img.onload = function(){         // Once it's loaded...
    ctx.drawImage(img, 0, 0);      // Draw it to canvas
    step = ++step % nOfImages ;    // Increase and loop step
    setTimeout(slideImages, 3000); // Do it again in 3000ms
  };
  img.src = images[step];          // Finally, set the new image src
}

slideImages(); // START
    <section id="photoSliderContainer">
      <canvas id="photoSliderViewport">
        Your browser does not support the HTML5 canvas tag.
      </canvas>
    </section>

Upvotes: 1

Related Questions