I've issues to display "canvas" on mainContent

by **Alemantico** » Fri Feb 17, 2012 6:53 am

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= "???">

by **zcorpan** » Mon Feb 20, 2012 10:37 am

You already have window.onload = function () { .... That's equivalent to <body onload="">. You can't have both.

I've issues to display "canvas" on mainContent

I've issues to display "canvas" on mainContent

Re: I've issues to display "canvas" on mainContent

Who is online

Who is online