These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:12 pm Advanced search

I've issues to display "canvas" on mainContent

If you are stuck or have questions regarding HTML or other Web technologies, ask your questions here. No question too dumb!

I've issues to display "canvas" on mainContent

Postby 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= "???">
Alemantico
<h6>
 
Posts: 1
Joined: Fri Feb 17, 2012 6:35 am

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

Postby 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.
zcorpan
<article>
 
Posts: 807
Joined: Tue Feb 06, 2007 8:29 pm
Location: Sweden


Return to Help & Advice

Who is online

Users browsing this forum: No registered users and 1 guest