Currently, I am engrossed in creating an animation that utilizes the canvas element to fill a rectangle with color based on specific percentages. While I have managed to accomplish this task, I am encountering issues with applying a bottom and right border to the inner square. Despite using ctx.strokeStyle to define the border, it does not seem to work as intended. Any insights or assistance in identifying where I might be going wrong would be greatly appreciated. Thank you!
You can view the functional fiddle here: http://jsfiddle.net/2n6kduL4/22/
HTML Content:
<div id="mydiv">
<canvas id="Rectangle1" width="100" height="100" style="border:1px solid #d3d3d3;background:#7392a8;">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="Rectangle2" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="Rectangle3" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
<canvas id="Rectangle4" width="100" height="100" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
JQUERY Content:
(function(){
for (j = 1; j < 5; j++) {
var myTime = {};
myTime[1] = 0.5;
myTime[2] = 0.9;
myTime[3] = 0.1;
myTime[4] = 0.5;
(function(){
var canvas = document.getElementById('Rectangle' + j);
//console.log(canvas);
//var ctx = document.getElementById(canvas)[k].getContext('2d');
var ctx =canvas.getContext('2d');
//console.log(ctx);
var myPerc = 100;
ctx.fillStyle = "rgb(255, 255, 255)";
ctx.fillRect(0, 0, myPerc, myPerc);
ctx.save();
for (var i = 0; i < (myPerc * myTime[j]); i++) {
ctx.fillStyle = "rgb(0, 255, 0)"; //greeen
ctx.strokeStyle = 'rgb(0,0,0)';
ctx.lineWidth = 4;
ctx.stroke();
console.log("before", ctx);
// ctx.fillRect(0, 0, +i, +i);
(function (i) {
setTimeout(function () {
console.log(ctx, j);
ctx.fillRect(0, 0, +i, +i);
}, 50 * i);
})(i);
}
})();
}
})();
Best regards, Pravallika