Question

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!

Was it helpful?

Solution

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>

OTHER TIPS

A simplified version of the above answer. 

  //Create Canvas
  var canvas = document.createElement("canvas");
  canvas.width = 720 
  canvas.height = 500;

  //Get Context
  var ctx  = canvas.getContext("2d");
  ctx .fillStyle = "black";
  ctx .fillRect(0, 0, canvas.width, canvas.height);

  //Load Image
  var img = new Image();
  img.src = "https://images.pexels.com/photos/3722151/pexels-photo-3722151.jpeg";
  img.onload = function() {
  ctx .drawImage(
    img,
    0,
    0,
    canvas.width,
    canvas.height
  );
};

  //Add Canvas
  canvas.id = "fatLady";
  document.body.appendChild(canvas);

Try it on CodePen

https://codepen.io/hiteshsahu/pen/QWjrygb?editors=1111

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top