New course! Every coder should learn Generative AI!
Try a free lesson0
How can I use for in JavaScript to create more canvas object with less code
for (I of loop){}
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
+ 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>
<!-- RETURN HTML IS
<canvas id="Canvas0" class="canvas-example"></canvas>
<canvas id="Canvas1" class="canvas-example"></canvas>
<canvas id="Canvas2" class="canvas-example"></canvas>
<canvas id="Canvas3" class="canvas-example"></canvas>
<canvas id="Canvas4" class="canvas-example"></canvas>
<canvas id="Canvas5" class="canvas-example"></canvas>
<canvas id="Canvas6" class="canvas-example"></canvas>
<canvas id="Canvas7" class="canvas-example"></canvas>
<canvas id="Canvas8" class="canvas-example"></canvas>
<canvas id="Canvas9" class="canvas-example"></canvas>
-->
</body>
</html>
Often have questions like this?
Learn more efficiently, for free:
Hot today
Problem
0 Votes
USING HTML ONLY!!!
5 Votes
Effects on HTML and JavaScript
0 Votes
Programming sickness
3 Votes
Help. Помогите пожалуйста
1 Votes
Izzy the iguana
0 Votes