0

Busco que al ingresar valores a un input me cree la misma cantidad de imágenes en un canvas.

Esto es lo que llevo:

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);
    }

Pero me sale el siguiente 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)

1 respuesta 1

0

El error es porque al método drawImage, le estas pasando un jQueryObject y no un HTMLImageElement

Solución:

Guardar en la variable image el primer elemento obtenido por el selector $('.screem'), es decir, $('.screem')[0];

Ejemplo:

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

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.