Draw dots on html5 canvas

Question

I have a percentage that I want to represent as dots on a canvas. This is essentially a 10 x 10 matrix where I have a dot or image that represents one percent. so when it is 100% it will be green and when it is 10% only 10 of the dots will be green and the rest red.

Any idea what would be the best way to approach this problem?

something similar to this:

Except they should be circles/images instead of squares?

Answer 1

Here i created a simple example. Hope it'd be helpful to you.

  var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); var sizeX = canvas.width / 10; var sizeY = canvas.height / 10; var total = 15; var count = 0; for (var j = 0; j < 10; j++) { for (var i = 0; i < 10; i++) { context.beginPath(); context.arc(sizeX * (i+.5), sizeY * (j+.5), sizeX / Math.PI, 0, 2 * Math.PI, false); context.fillStyle = total > count ? 'green' : 'red'; context.fill(); count++; } } 

 <canvas id="mycanvas" width="200" height="200" style="border:1px solid black;"></canvas>