Создание холста и установка его ширины не удаются со второй попытки - PullRequest
Новая
       13

Создание холста и установка его ширины не удаются со второй попытки

0 голосов
/ 05 октября 2019

Я создал два элемента canvas для рисования. Оба они являются стандартными элементами с разными идентификаторами.

Я выбираю первый с помощью javascript, получаю контекст и назначаю ширину 100vw для обоих. Работает как задумано.

Я повторяю тот же код, чтобы выбрать второй холст, я получаю "неопределенный" объект из идентичного холста + контекстный селектор:

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>

Не знаю, что с этим делать. Это должно быть так просто.

Где может быть проблема?

1 Ответ

0 голосов
/ 05 октября 2019

canvas in ctx.canvas - это свойство CanvasRenderingContext2d.canvas , а не ваша var canvas переменная.

Таким образом, чтобы получить доступ к одному из контекста ctxbg, вытакже необходимо получить к нему доступ по .canvas: 

  ctxbg.canvas.width = winWidth;
  ctxbg.canvas.height = winHeight;
...