Slideshow by using canvas

slideShow:

we can create a slideshow easily by using canvas.If you read animation  tutorial then this project will easier for you.The basic techniques are same as animation project have.So go back and have a look to animation project first.

Sorry your browser does not support canvas tag.Upgrade to latest version pls

HatirJheel Dhaka,Bangladesh

s<script type="text/javascript"> 
//var imgPath=["images/bandarban.jpg","images/Bangladesh-teagarden.jpg","images/hill_tree.jpg","images/abc.jpg"];
var imgPath=["http://www.thedailystar.net/photo/2013/01/10/2013-01-10__ft05.jpg","http://www.daily-sun.com/admin/news_images/378/image_378_81765.jpg","http://farm9.staticflickr.com/8079/8337298091_575f7676de.jpg","http://www.newagebd.com/newspic/e980ddcb76a6fe7a72c32cfb3485034620130102.jpg"];
var img=document.createElement("img"); 
var currImg=0; 
window.onload=function()
{ 
var can=document.getElementById("mc");
var mc=can.getContext("2d");
img.setAttribute('width','500');
img.setAttribute('height','400');
changeimg();

setInterval(changeimg,3000);

function changeimg(){
img.setAttribute('src',imgPath[currImg++]);
img.onload=function()
{
if(currImg>=imgPath.length)
{currImg=0; }
mc.drawImage(img,0,0,500,400);

}
}

}

</script>

 <canvas id="mc" width="500" height="400px">
            Sorry your browser does not support canvas tag.Upgrade to latest version pls
            </canvas>

Description:

Slideshow is a collection of images.So for that reason we take a array which contains all of our images.
Then we create a image tag by using createElement () method because we have to use image tag to show image on canvas and then dynamically change the source attribute of that image tag.
variable currImg is the array index value.If it 0 then show the first image on that array and then increase by one.Thus cause the image change.

Then within window.onload function we set the previously created image width and  height by using javascript setAttribute method.setInterval function will execute every 3 seconds later and execute changeimg

function.Each time change image function execute variable currImg value increaseby one.

Look carefully in changeimg function we set the source of image tag. and we give  array imgPath(our image container) and in the index  [] we call our currImg variable which value will increase each time the changeimg function execute.
So first time imgPath index is 0  and in the canvas it show the first image after 3 second later array index value would be 1 and it will show its second image.
But when currImg variable value is greater  than total array length then we set the currImg value 0 so its again start changing the index value of arry.Otherwise slideshow will stop when all of the array's value is shown.

HTML 5 syllabus