Как объявить несколько CANVAS с разными контекстами (ctx) в массиве?

Question

Я использую несколько CANVAS в файле HTML и хочу объявить их в массиве. Это объявление (не массив):

var canvas0 = document.getElementById('canvas0');
var ctxPaint0 = canvas0.getContext('2d');
var canvas1 = document.getElementById('canvas1');
var ctxPaint1 = canvas1.getContext('2d');
var canvas2 = document.getElementById('canvas2');
var ctxPaint2 = canvas2.getContext('2d');
var canvas3 = document.getElementById('canvas3');
var ctxPaint3 = canvas3.getContext('2d');

Чтобы оптимизировать это, я пытаюсь использовать Для циклов, но это не работает:

var canvasArray = ["canvas0","canvas1","canvas2","canvas3"]; 
for (var i = 0; i < canvasArray.length; i++) { 

window["canvas"+i] = document.getElementById(canvasArray[i]);
window["ctxPaint"+i] = canvasArray[i].getContext('2d');

}

Выводит эту ошибку:

Uncaught TypeError: canvasArray[i].getContext is not a function

EDIT: Благодаря RSchneyer, изменение массива строк на массив холста теперь работает нормально:

let canvasArray = Array.from(document.getElementsByTagName("canvas"));
for (var i = 0; i < canvasArray.length; i++) { 

window["canvas"+i] = document.getElementById(canvasArray[i]);
window["ctxPaint"+i] = canvasArray[i].getContext('2d');

}

Answer 1

Вы могли бы сделать как

const ctxArray = [...document.querySelectorAll('[id^="canvas"]')].map(cvs => cvs.getContext('2d'));

, что приведет к массиву, содержащему весь контекст холста - это все, что вам нужно, поскольку для извлечения оригинального холста из его контекста все, что вам нужно, это i.e.:

let i = 0; // or any desired index
const canvas = ctxArray[i].canvas;

Answer 2

canvasArray - это массив строк, которые не имеют функции getContext().Попробуйте заменить canvasArray[i] in window["ctxPaint"+i] = canvasArray[i].getContext('2d'); на window["canvas"+i] или создать другой массив для хранения ваших фактических переменных canvas