Question

114

drawImage() not working

rated 0 times [ 119] [ 5] / answers: 1 / hits: 47174 / 11 Years ago, sun, february 24, 2013, 12:00:00

I am reading through Making Isometric Social Real-Time Games with HTML5, CSS3 and Javascript.

I am not far into it, and I have run into a canvas problem that has ahd me stumped for most of the day.

drawImage() does not seem to be drawing. I have researched the issue and have tried many permutations of pre-loading the image, but so far nothing is working.

Here is my code:

HTML:

<canvas id=game width=100 height=100>

    Your browser doesn't include support for the canvas element.

</canvas>

CSS:

html {

height:100%;

overflow:hidden

}



body {

margin:0px;

padding:0px;

height:100%;

}

and js:

 window.onload = function() {



var canvas = document.getElementById('game');



canvas.width=document.body.clientWidth;

canvas.height=document.body.clientHeight;



var c = canvas.getContext('2d');











function showIntro() {



    var phrase = Click or tap screen to start;



    c.clearRect (0, 0, canvas.width, canvas.height);



    var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);

    grd.addColorStop(0, #9db7a0);

    grd.addColorStop(1, #e6e6e6);



    c.fillStyle = grd;

    c.fillRect (0, 0, canvas.width, canvas.height);







    var logoImg = new Image();      

    logoImg.src = '../img/logo.png';



    var originalWidth = logoImg.width;



    logoImg.width = Math.round((50 * document.body.clientWidth) / 100);

    logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);





  var logo = {

     img: logoImg,

     x: (canvas.width/2) - (logoImg.width/2),

     y: (canvas.height/2) - (logoImg.height/2)

  }



  c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);











    c.font = bold 16px sans-serif;

    var mt = c.measureText(phrase);

    var xcoord = (canvas.width / 2 ) - (mt.width / 2);

    c.fillStyle = '#656565'

    c.fillText (phrase, xcoord, 30);

}



showIntro();





 }

Any help would be appreciated!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

keyanah

Add To Favorites

Follow

Total Points: 642

Total Questions: 93

Total Answers: 114

Location: Virgin Islands (U.S.)

Member since Tue, Jul 7, 2020

4 Years ago

answered 11 Years ago darennevina · Accepted Answer

You almost have it...

You just have to give the image time to load before drawing it.

You give an image time to load with this code:

var logoImg = new Image();

logoImg.onload = function() {



    // At this point, the image is fully loaded

    // So do your thing!



};

logoImg.src = myPic.png;

Here is complete code and a Fiddle: http://jsfiddle.net/m1erickson/GKK39/

<!doctype html>

<html>

<head>

<link rel=stylesheet type=text/css media=all href=css/reset.css /> <!-- reset css -->

<script type=text/javascript src=http://code.jquery.com/jquery.min.js></script>



<style>

    body{ background-color: ivory; }

    canvas{border:1px solid red;}

</style>



<script>

    $(function(){



        var canvas=document.getElementById(canvas);

        var c=canvas.getContext(2d);



        function showIntro() {



            var phrase = Click or tap screen to start;



            var logoImg=new Image();

            logoImg.onload=function(){



                c.clearRect (0, 0, canvas.width, canvas.height);



                var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);

                grd.addColorStop(0, #9db7a0);

                grd.addColorStop(1, #e6e6e6);

                c.fillStyle = grd;

                c.fillRect (0, 0, canvas.width, canvas.height);



                var originalWidth = logoImg.width;

                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);

                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);



                var logo = {

                  img: logoImg,

                  x: (canvas.width/2) - (logoImg.width/2),

                  y: (canvas.height/2) - (logoImg.height/2)

                }

                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);



                c.font = bold 16px sans-serif;

                var mt = c.measureText(phrase);

                var xcoord = (canvas.width / 2 ) - (mt.width / 2);

                c.fillStyle = '#656565'

                c.fillText (phrase, xcoord, 30);



            }

            logoImg.src=http://dl.dropbox.com/u/139992952/car.png;



        }



        showIntro();       



    }); // end $(function(){});

</script>



</head>



<body>

    <canvas id=canvas width=300 height=300></canvas>

</body>

</html>