How can I use for in JavaScript to create more canvas object with less code

for (I of loop){}

3rd Sep 2019, 8:54 PM

SCP 251

2 Answers

+ 2

Create a class that controls how each instance is drawn to the canvas. Check this code to see how. You use the loop and push new instances into an array. https://code.sololearn.com/Wi3p3Ham9qJ5/?ref=app

3rd Sep 2019, 9:31 PM

Zeke Williams

+ 1

Hi, you can define a class for add a style to a single canvas element and make a loop to create all of them. Run this code as example: <!DOCTYPE html> <html> <body> <style> .canvas-example{ border: 1px solid red; } </style> <script> var c = document.createElement('canvas'); var target = document.body; for(var i=0; i < 10; i++){ c = document.createElement('canvas'); c.setAttribute('id', 'Canvas'+i); c.classList.add('canvas-example'); target.appendChild(c); } </script>  </body> </html>

3rd Sep 2019, 9:32 PM

Gabriele Marra