Skip to main content
added 4 characters in body
Fonte Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

O problema é que você está executando um construtor no mesmo momento em que o define (por causa do new, como apontado pelo Gustavo Rodrigues). Assim, todos os parâmetros que você está passando são undefined.

A soluçãogambiarra mais simplesrápida é mover o primeiro bloco de código para dentro de drawScreen, mas, se entendi bem o seu código, eu reescreveria tudo de maneira mais simples, sem usar um construtor nem this. Isso inclusive resolve um problema que você encontraria logo adiante, pois o valor de this dentro do onload não seria o que você espera... Minha sugestão é usar isto:

var drawIt = function(canvasCtx, drawObj, x, y) {
   drawObj.onload = function(){
       canvasCtx.drawImage(drawObj, x, y);
   }
}

O uso é como você previu mesmo:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var Image1 = new Image();
Image1.src = "https://www.google.com.br/images/srpr/logo11w.png";

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

drawScreen();

Exemplo no jsfiddle

O problema é que você está executando um construtor no mesmo momento em que o define (por causa do new, como apontado pelo Gustavo Rodrigues). Assim, todos os parâmetros que você está passando são undefined.

A solução mais simples é mover o primeiro bloco de código para dentro de drawScreen, se entendi bem o seu código, eu reescreveria tudo de maneira mais simples, sem usar um construtor nem this. Isso inclusive resolve um problema que você encontraria logo adiante, pois o valor de this dentro do onload não seria o que você espera... Minha sugestão é usar isto:

var drawIt = function(canvasCtx, drawObj, x, y) {
   drawObj.onload = function(){
       canvasCtx.drawImage(drawObj, x, y);
   }
}

O uso é como você previu mesmo:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var Image1 = new Image();
Image1.src = "https://www.google.com.br/images/srpr/logo11w.png";

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

drawScreen();

Exemplo no jsfiddle

O problema é que você está executando um construtor no mesmo momento em que o define (por causa do new, como apontado pelo Gustavo Rodrigues). Assim, todos os parâmetros que você está passando são undefined.

A gambiarra mais rápida é mover o primeiro bloco de código para dentro de drawScreen, mas, se entendi bem o seu código, eu reescreveria tudo de maneira mais simples, sem usar um construtor nem this. Isso inclusive resolve um problema que você encontraria logo adiante, pois o valor de this dentro do onload não seria o que você espera... Minha sugestão é usar isto:

var drawIt = function(canvasCtx, drawObj, x, y) {
   drawObj.onload = function(){
       canvasCtx.drawImage(drawObj, x, y);
   }
}

O uso é como você previu mesmo:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var Image1 = new Image();
Image1.src = "https://www.google.com.br/images/srpr/logo11w.png";

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

drawScreen();

Exemplo no jsfiddle

Fonte Link
bfavaretto
  • 66,2mil
  • 11
  • 151
  • 228

O problema é que você está executando um construtor no mesmo momento em que o define (por causa do new, como apontado pelo Gustavo Rodrigues). Assim, todos os parâmetros que você está passando são undefined.

A solução mais simples é mover o primeiro bloco de código para dentro de drawScreen, se entendi bem o seu código, eu reescreveria tudo de maneira mais simples, sem usar um construtor nem this. Isso inclusive resolve um problema que você encontraria logo adiante, pois o valor de this dentro do onload não seria o que você espera... Minha sugestão é usar isto:

var drawIt = function(canvasCtx, drawObj, x, y) {
   drawObj.onload = function(){
       canvasCtx.drawImage(drawObj, x, y);
   }
}

O uso é como você previu mesmo:

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
var Image1 = new Image();
Image1.src = "https://www.google.com.br/images/srpr/logo11w.png";

function drawScreen(){
   drawIt(ctx,Image1,100,100);
}

drawScreen();

Exemplo no jsfiddle