Error using a for with jQuery and Canvas

Question

Error using a for with jQuery and Canvas

Navigation

#1 by (0 votes)

0

I am looking for the same amount of images on a canvas when I enter values at input .

This is what I have:

var distancia, aux = 0;
    for (var i =  0; i <arrText.length; i++) {
      parseFloat(arrText[i]);
      distancia = (arrText[i] + aux) / escala;
      aux = aux + arrText[i];
      var disxd = (aux - 250) / escala;
      var image = $('.screem');
      ctx.drawImage(image, 80 + disxd, 67);
    }

But I get the following error.

Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'
    at HTMLButtonElement.<anonymous> (<anonymous>:1700:11)
    at HTMLButtonElement.dispatch (<anonymous>:3:10315)
    at HTMLButtonElement.q.handle (<anonymous>:3:8342)

javascript jquery

asked by Eduard Zora 06.04.2017 в 16:42

source

1 answer

create exe with pyinstaller including subfolders Error importing js into webpack (vue-cli)

score 0 · Accepted Answer

The error is because the drawImage method, you are passing it a jQueryObject and not a HTMLImageElement

Solution:

Save in the variable image the first element obtained by the selector $('.screem') , that is, $('.screem')[0] ;

Example:

//... código ...
var image = $('.screem')[0];
ctx.drawImage(image, 80 + disxd, 67);