Error with window.onload with sprites

Question

Error with window.onload with sprites

Navigation

#1 by (2 votes)
#2 by (0 votes)

0

Good afternoon,

Does anyone know why I miss this error ?:

"coin.render is not a function at window.onload"

The code on my website is the following:

    var ImgMoneda = new Image();
    ImgMoneda.src = "coinAnimation.png"

    var canvas;
    var ctx;

    function sprite (opciones){

      var that = {};

      var width = opciones.width;
      var height = opciones.height;
      var image = opciones.image;

      //Función que renderiza el sprite
      var render = function(){

        drawImage(
          that.image,
          0,
          0,
          that.width,
          that.height,
          0,
          0,
          that.width,
          that.height);
      }

      return that;

    }


    var coin = sprite({
      width: 100,
      height: 100,
      image: ImgMoneda
    });

    window.onload = function(){
      canvas = document.getElementById("miCanvas");
      ctx = canvas.getContext("2d");

      coin.render();
    }

    <canvas id = "miCanvas" width = "100" height = "100"></canvas>

javascript html

asked by user33094 16.03.2017 в 16:01

source

2 answers

Collapse with Bootstrap 3 and jQuery does not work How to verify if an item is in a stack and then pass it to a queue in c ++ using standard libraries (stl)

score 2 · Answer 1

Problems:

The render function is private, that is, it can not be accessed from outside the scope of the function sprite ( that contains it ).
In the function call drawImage , you are trying to access data that is not stored in the variable that . Ex: that.image, that.height, etc.

Solutions:

Register the that function% of% in% object, so that it can be accessed by render .
When calling obj.render() , use the variable of drawImage . ( You could also save these values in the scope object, it all depends if you want to be able to access them from the outside )

Example:

var ImgMoneda = new Image();
ImgMoneda.src = "coinAnimation.png"

var canvas;
var ctx;

function sprite (opciones){

  var that = {};

  var width = opciones.width;
  var height = opciones.height;
  var image = opciones.image;

  //Función que renderiza el sprite
  var render = function(){

    // AQUI - Usamos las variables del scope
    drawImage(
      image,
      0,
      0,
      width,
      height,
      0,
      0,
      width,
      height);
  }

  // AQUI - Hacemos público el metodo render
  that.render = render;
  return that;
}


var coin = sprite({
  width: 100,
  height: 100,
  image: ImgMoneda
});

window.onload = function(){
  canvas = document.getElementById("miCanvas");
  ctx = canvas.getContext("2d");

  coin.render();
}

<canvas id = "miCanvas" width = "100" height = "100"></canvas>

score 0 · Answer 2

Instead of being var render = function(){} it should be in your case that.render = function(){} And the same for the rest of the variables that you define within the render, but you would not be exposing them.

var ImgMoneda = new Image();
ImgMoneda.src = "http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png";

var canvas;
var ctx;

function sprite (opciones){

  var that = {};

  that.width = opciones.width;
  that.height = opciones.height;
  that.image = opciones.image;

  //Función que renderiza el sprite
  that.render = function(){

  
    ctx.drawImage(
      that.image,
      0,
      0,
      that.width,
      that.height,
      0,
      0,
      that.width,
      that.height);
  }

  return that;

}


var coin = sprite({
  width: 300,
  height: 300,
  image: ImgMoneda
});

window.onload = function(){
  canvas = document.getElementById("miCanvas");
  ctx = canvas.getContext("2d");

  coin.render();
}

<canvas id = "miCanvas" width = "100" height = "100"></canvas>