CODEWITHSUNDEEP
javascriptdrawimage
kanjas
kanjas

Reputation: 73

JS Image not showing up on canvas

I have a bird={} object where I define a draw function, however the image does not appear when called in the render function. Could anyone point me to what Im doing wrong? Thanks in advance.

EDIT: I have noticed the reason it does not always show up is because there are other sprites on the screen, and when I turn them off the bird always show up. Is there anything that can fix this?

bird = {
    draw:function() {
        var birdimg = new Image();
        birdimg.onload = function() {
            ctx.drawImage(birdimg, -20, height - 200);
        }
        birdimg.src = "//i.sstatic.net/nsZLM.png"; //"assets/bird.png";
    }
};

function main() {
    canvas = document.createElement("canvas");
    //Set the width and height to the sizes of the browser
    width = window.innerWidth;
    height = window.innerHeight;

    //Frames the game if the width is larger than 500
    if(width >=500){
        width = 320;
        height = 480;
        canvas.style.border = "1px solid #000";
        evt = "mousedown";
    }

    //Sets the canvas sizes to the width and height variables
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");

    //Set the default state
    currentstate = states.Splash;

    document.body.appendChild(canvas);

    render();
}

function render(){
    //Adding bird
        bird.draw();


        //Loads sky.png
        bgimg = new Image();
        bgimg.onload = function() {

            ctx.drawImage(bgimg,-20,height-200);
            ctx.drawImage(bgimg,256,height-200);

        }

        bgimg.src = "assets/sky.png";

        //Loads land img
        landimg = new Image();
        landimg.onload = function() {

            ctx.drawImage(landimg,0,height-100);



        }

        landimg.src = "assets/land.png";

        //Creates rectangle that colors background. THIS IS THE BOTTOM LAYER. WRITE CODE ABOVE

        ctx.fillStyle="#4ec0ca";
        ctx.fillRect(0,0,canvas.width,canvas.height);

        ctx.stroke();

}

Upvotes: 1

Views: 960

Answers (1)

Nicholas Leoutsakos
Nicholas Leoutsakos

Reputation: 89

Following @K3N's suggestions here is a working example. Thanks @K3N for the guidance.

With these changes your code would look something like this:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <script>
    // declare vars so they are available outside of main()
    var canvas,
        ctx,
        width,
        height;

    var bird = {
        draw: function() {
            var birdimg = new Image();
            birdimg.src ="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg";

            birdimg.onload = function() {
                ctx.drawImage(birdimg, -20, height - 200);
            };
        }
    };

     function main(){
       canvas = document.createElement("canvas");

       //Set the width and height to the sizes of the browser
       width = window.innerWidth;
       height = window.innerHeight;

       //Frames the game if the width is larger than 500
       if(width >=500){
         width = 320;
         height = 480;
         canvas.style.border = "1px solid #000";

         var evt = "mousedown";
       }



       //Sets the canvas sizes to the width and height variables
       canvas.width = width;
       canvas.height = height;
       ctx = canvas.getContext("2d");

       //Set the default state
       // "states" is not defined so I'm commenting this out
       // var currentstate = states.Splash;

       document.body.appendChild(canvas);

       render();
    }

    main();

    function render(){
      //Adding bird
      bird.draw();
    }
  </script>
</body>
</html>

Live Demo

Hope this helps, Nick Leoutsakos

Upvotes: 1

Related Questions