How to declare several CANVAS with different contexts (ctx) in an array?

user_1274120 0
Viewed 287

I'm using several CANVAS in a HTML file and I want to declare them in an Array. This is the (not array) declaration:

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

To optimize this, I'm trying to use For loops, but it doesn't work:

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

}

It outputs this error: 

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

EDIT: Thanks to RSchneyer, changing the Array of strings to an Array of Canvas works fine now: 

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

}
canvas arrays html javascript
2 Answers

You could do like

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

which will result to an array holding all the canvases context - which is all you need, since to get the original canvas out of its context all you need is i.e.:

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

canvasArray is an array of strings, which don't have a getContext() function. Try replacing the canvasArray[i] in window["ctxPaint"+i] = canvasArray[i].getContext('2d'); with window["canvas"+i], or create another array to hold your actual canvas variables

user_101244210
Related