HTML5 Canvas Slideshow Using Javascript

Question

I'm not sure exactly where my issue lies, I'm relatively new to both canvas and JavaScript so I'm sorry if this is very vague but I cannot get my slideshow canvas to function, let alone display an image.

<!DOCTYPE html>

<html>
<head>
<title>PhotoGenesis</title>
<LINK REL=StyleSheet HREF="homecss.css" TYPE="text/css" MEDIA=screen>
<script type="text/javascript" src="homescript.js"></script>
</head>

<body onLoad="javascript:preloader()">
<header>
    <a href=http://localhost.com/home><img id=logo alt="PhotoGenesis" src="logo.png""/>         </a>
    <nav id=headernav>        
        <a href=http://localhost.com/home>home</a>
        <a href=http://localhost.com/news>news</a>
        <a href=http://localhost.com/photography>photography</a>
        <a href=http://localhost.com/video>video</a>
        <script type="text/javascript">
            var lightbox="lightbox ("+"0"+")";
            document.write("<a href=http://localhost.come/lighbox>" + lightbox + "</a>");            
        </script>
        <a href=http://localhost.com/about>about</a>
        <a href=http://localhost.com/contact>contact</a>
        <a href=http://localhost.com/blog>blog</a>
    </nav>
    <span id=search></span>
    <img id=miscone alt="Full Screen" src="miscone.png"/>
    <img id=misctwo alt="Share" src="misctwo.png"/>
</header>
<main onLoad="javascript:canvasslider()">
    <canvas id="defaultbackground" width=100%; height=100%;/>    
</main>
<footer>
            <nav id="footernav">
                <a href=http://www.facebook.com><img id="fbnav" alt="Facebook" src="fbooknav.png"/></a>
                <a href=http://www.twitter.com><img id="tnav" alt="Twitter" src="twitternav.png"/></a>
                <a href=http://www.stumbleupon.com><img id="snav" alt="StumbleUpon" src="stumblenav.png"/></a>
            </nav>
</footer>
</body>
</html>

<script language="JavaScript">
function preloader() 
 {

     // counter
     var i = 0;

     // create object
     imageObj = new Image();

     // set image list
     images = new Array();
     images[0]="background1.png"
     images[1]="background2.png"
     images[2]="background3.png"

     // start preloading
     for(i=0; i<=images.length; i++) 
     {
          var backstring ="background"+i+".png";
      images[i].id=backstring;
          imageObj.src=images[i];
     }

 }

 function canvasslide()
 {
    function init()
    {
        defaultbackground = document.getElementById("defaultbackground");
        ctx = defaultbackground.getContext("2d");
            for(i=0; i<=images.length; i++){
                var backstring ="background"+i+".png";
                sprite = document.getElementById(backstring);
                ctx.drawImage(sprite,0,0);}
        }
}
 </script>

Answer 1

sprite.onload = function() {
  ctx.drawImage(sprite,0,0);
}

I'm pretty sure your image isn't loaded yet when you draw it on canvas. Try something like this, I'm not sure this is the right code because I didn't get every part of your code, but you have to use image.onload function before you draw it onto a canvas.

HTML5 Canvas Slideshow Using Javascript

Question

1 answers

solution1
0 2012-05-31 11:55:16

HTML5 Canvas Slideshow Using Javascript

Question

1 answers

solution1 0 2012-05-31 11:55:16

solution1
0 2012-05-31 11:55:16