2

En el siguiente código estoy ejecutando una función que solo afecta al primer canvas que está dentro de mi body con el ID print, lo que quisiera es asignar la misma función a todos los canvas que ya están dentro de mi DOM y a los que yo quiera agregar con javascript

var wrapper = document.getElementById('print');
var canvas = wrapper.querySelector('canvas');
var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});

function resizeCanvas() {
  var ratio = Math.max(window.devicePixelRatio || 1, 1);

  // This part causes the canvas to be cleared
  canvas.width = (canvas.offsetWidth * ratio) / 2.5;
  canvas.height = (canvas.offsetHeight * ratio) / 3;
  canvas.getContext('2d').scale((ratio, ratio) / 2);

  signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

1
  • si haces esto no funciona? var canvas = wrapper.querySelectorAll('canvas'); Despues tenes que iterar el resultado porque obtendrias un array con los elementos el 14 ene. 2019 a las 21:47

1 respuesta 1

1

Para hacerlo con querySelectorAll lo único que tienes que hacer es un bucle dentro de la función, para en lugar de aplicar los cambios al canvas seleccionado, lo hago a todos los canvas de la lista:

var canvas = document.querySelectorAll('canvas');
var signaturePad = new SignaturePad(canvas, {
  backgroundColor: 'rgb(255, 255, 255)'
});

function resizeCanvas() {
  var ratio = Math.max(window.devicePixelRatio || 1, 1);

  // crea un bucle para aplicar los cambios a todos los canvas del array
  for (let x = 0; x < canvas.length; x++) { 
    // This part causes the canvas to be cleared
    canvas[x].width = (canvas[x].offsetWidth * ratio) / 2.5;
    canvas[x].height = (canvas[x].offsetHeight * ratio) / 3;
    canvas[x].getContext('2d').scale((ratio, ratio) / 2);
  }

  signaturePad.clear();
}

window.onresize = resizeCanvas;
resizeCanvas();

Como lo que devuelve querySelectorAll es una lista de elementos al momento de ejecutar la instrucción, deberás mover la línea:

var canvas = document.querySelectorAll('canvas');

al principio de la función resizeCanvas (para que tome los cambios si se añaden otros canvas más adelante). Alternativamente, podrías usar var canvas = getElementsByTagName("canvas") fuera de la función, porque getElementsByTagName devuelve una lista viva de elementos, es decir, la lista de elementos será los que cumplan el requisito en cada momento.

2
  • 1
    Si él dice que quiere alcanzar todos los canvas que haya en el DOM, no entiendo por qué sugieres que pase por wrapper.
    – A. Cedano
    el 14 ene. 2019 a las 22:35
  • @A.Cedano ¡Buen ojo! Me basé en el código de la pregunta y se me pasó eso por completo. Ya lo he actualizado. Gracias.
    – Alvaro Montoro
    el 14 ene. 2019 a las 22:53

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.