Hi, and good morning to everyone! I just registered on your forum by hoping to finally find an answer on my current biggest issue I have with my website. View days back I found out about the new canvas - feature in html5, and I programmed a slideshow with smooth transitions. Afterwards I tried to display it with the "onload" - command in the body tag on my canvas. But somehow I'm kind of confused, how can I manage that, since my code has several functions included? In order to give you a glimpse of what I'm talking, I just pasted my code below. The "???" on the end of the code only means, that this part of code I'm asking about:
var imagePaths = [
"my Image path goes here"
];
var showCanvas = null;
var showCanvasCtx = null;
var img = document.createElement("img");
var currentImage = 0;
var revealTimer;
window.onload = function () {
showCanvas = document.getElementById('showCanvas');
showCanvasCtx = showCanvas.getContext('2d');
img.setAttribute('width','600');
img.setAttribute('height','400');
switchImage();
// start the animation
setInterval(switchImage,3000);
}
function switchImage() {
img.setAttribute('src',imagePaths[currentImage++]);
if (currentImage >= imagePaths.length)
currentImage = 0;
showCanvasCtx.globalAlpha = 0.1;
revealTimer = setInterval(revealImage,100);
}
function revealImage() {
showCanvasCtx.save();
showCanvasCtx.drawImage(img,0,0,750,300);
showCanvasCtx.globalAlpha += 0.1;
if (showCanvasCtx.globalAlpha >= 1.0)
clearInterval(revealTimer);
showCanvasCtx.restore();
}
<body onload= "???">