He creado dos elementos de lienzo para dibujar. Ambos son elementos estándar con diferentes identificadores.

Selecciono el primero con javascript, obtengo el contexto y asigno un ancho de 100vw a ambos. Funciona según lo previsto.

Repito exactamente el mismo código para seleccionar el segundo lienzo, obtengo un objeto "indefinido" de lienzo idéntico + selector de contexto:

Html:

<canvas id="canvas"></canvas>
<canvas id="canvasbg"></canvas>

Js:

<script>
// select fore and background canvases
var canvas = document.getElementById('canvas'); 
var canvasbg = document.getElementById('canvasbg'); // object found

// get canvas 2D context and set them correct size
var ctx = canvas.getContext('2d'); 
var ctxbg = canvasbg.getContext('2d'); // object found

resize();

function resize() {
  var winWidth = window.innerWidth;
  var winHeight = window.innerHeight;

  ctx.canvas.width = winWidth; // works perfectly
  ctx.canvas.height = winHeight; // works perfectly

  ctxbg.canvasbg.width = winWidth; // console error: cannot set widht of undefined....???
  ctxbg.canvasbg.height = winHeight;
}
</script>

No tengo idea de qué hacer con esto. Esto debería ser tan básico.

¿Dónde puede estar el problema?

0
Jussi 5 oct. 2019 a las 13:13

1 respuesta

La mejor respuesta

El canvas en ctx.canvas es el CanvasRenderingContext2d.canvas, no su variable var canvas.

Entonces, para acceder al del contexto ctxbg, también debe acceder mediante .canvas:

  ctxbg.canvas.width = winWidth;
  ctxbg.canvas.height = winHeight;
0
Kaiido 5 oct. 2019 a las 14:33