I want to draw 4 canvas elements. That is to say, I want to draw the same canvas element, 4 times.
Using an id attached to one canvas element, I am able to get it and draw it successfully.
from main.js
var canvas = document.getElementById('box');
var ctx = canvas.getContext('2d');
var radius = 75;
var endPercent = 99;
var curPercent = 0;
ctx.lineWidth = "10";
ctx.strokeStyle = "green";
function draw(currentPerc){
ctx.clearRect(0,0, canvas.width, canvas.height)
ctx.beginPath();
ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
ctx.stroke();
curPercent++
if(curPercent < endPercent){
requestAnimationFrame(function(){
draw(curPercent/100);
});
}
}
draw();
from HomePage.js
<canvas id="box" width="200" height="200" ></canvas>
In beginning to work out how I'd go about drawing this four times, I tried the following:
First in HomePage.js I added 4 canvas elements with a class name of the same id name.
from HomePage.js
<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>
<canvas class="box" width="200" height="200" ></canvas>
then in the javascript I tried the following:
from Main.js
var canvasCollect = document.querySelectorAll('canvas.box');
canvasCollect.forEach(draw());
var ctx = canvas.getContext('2d');
var radius = 75;
var endPercent = 99;
var curPercent = 0;
ctx.lineWidth = "10";
ctx.strokeStyle = "green";
function draw(currentPerc){
ctx.clearRect(0,0, canvas.width, canvas.height)
ctx.beginPath();
ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
ctx.stroke();
curPercent++
if(curPercent < endPercent){
requestAnimationFrame(function(){
draw(curPercent/100);
});
}
}
This isn't working. Nothing is rendered.
Each instance of a HTMLCanvasElement has it's own 2D rendering context. If we take a look inside your draw() function we can see the following lines:
ctx.clearRect(0,0, canvas.width, canvas.height)
ctx.beginPath();
ctx.arc('100', '100', radius, 0, curPercent*currentPerc, false);
ctx.stroke();
ctx is a variable pointing to the CanvasRenderingContext2D of your <canvas> element with the id 'box'.
So as it is, the draw() function would merely draw to this single canvas. To make it draw to any canvas of class box, you need to address each's own 2D rendering context.
Here's an example:
var canvasCollect = document.querySelectorAll('canvas.box');
var radius = 75;
var endPercent = 100;
var curPercent = 0;
function draw() {
var ctx;
canvasCollect.forEach(canvas => {
ctx = canvas.getContext('2d');
ctx.lineWidth = "10";
ctx.strokeStyle = "green";
ctx.clearRect(0, 0, canvas.width, canvas.height)
ctx.beginPath();
ctx.arc('100', '100', radius, 0, 2 * Math.PI * curPercent / 100, false);
ctx.stroke();
ctx.closePath();
});
curPercent++;
if (curPercent <= endPercent) {
requestAnimationFrame(function() {
draw(curPercent);
});
}
}
draw(curPercent);<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>
<canvas class="box" width="200" height="200"></canvas>