Canvas javascript drawImage method

Question

Result: It doesn't load the image to the canvas. I'm getting white rectangle, any idea why? I thought I could just call the draw method directly from the variable, like eg: bg.draw, or does that mean that I need to re-draw the Image again on the canvas and re-run the bg.draw?

const cvs = document.getElementById("firstplatform");
const ctx = cvs.getContext("2d");

// GAME VARS AND CONSTS
let frames = 0;

// LOAD IMAGE
const sprite = new Image();
sprite.src = "img/sprite.png";

//BACKGROUND
const bg = {
  sX: 0,
  sY: 0,
  w: 275,
  h: 226,
  x: 0,
  y: cvs.height - 226,


  draw: function () {
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x,
      this.y,
      this.w,
      this.h
    );
    ctx.drawImage(
      sprite,
      this.sX,
      this.sY,
      this.w,
      this.h,
      this.x + this.w,
      this.y,
      this.w,
      this.h
    );
  },
};

// DRAW
bg.draw();`

Below is the index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>First Game</title>
    <link href="https://fonts.googleapis.com/css?family=Teko:700" rel="stylesheet">
    <style>        
        canvas{
            border: 1px solid #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="firstplatform" width="320" height="480"></canvas>


    <script src="game.js"></script>
</body>
</html>

Answer 1

You need to wait for the image to load before you can draw it to the canvas. So wrap bg.draw in an onload handler:

sprite.onload = function()
{
  bg.draw();
}

 const cvs = document.getElementById("firstplatform"); const ctx = cvs.getContext("2d"); // GAME VARS AND CONSTS let frames = 0; // LOAD IMAGE const sprite = new Image(); sprite.src = "https://cdn.sstatic.net/Img/unified/sprites.svg?v=fcc0ea44ba27"; //BACKGROUND const bg = { sX: 0, sY: 0, w: 275, h: 226, x: 0, y: cvs.height - 226, draw: function () { ctx.drawImage( sprite, this.sX, this.sY, this.w, this.h, this.x, this.y, this.w, this.h ); ctx.drawImage( sprite, this.sX, this.sY, this.w, this.h, this.x + this.w, this.y, this.w, this.h ); }, }; sprite.onload = function() { bg.draw(); }

 <canvas id="firstplatform" width="320" height="480"></canvas>

Canvas javascript drawImage method

Question

1 answers

solution1
1 ACCPTED 2020-04-24 09:16:43

Canvas javascript drawImage method

Question

1 answers

solution1 1 ACCPTED 2020-04-24 09:16:43

solution1
1 ACCPTED 2020-04-24 09:16:43