CODEWITHSUNDEEP
javascripthtmlcanvas
Kevin
Kevin

Reputation: 3239

Draw dots on html5 canvas

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:

http://www.mathgoodies.com/lessons/vol4/images/percent_grid2.gif

Except they should be circles/images instead of squares?

Upvotes: 1

Views: 2351

Answers (1)

Clujio
Clujio

Reputation: 352

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>

Upvotes: 2

Related Questions