# Javascript draw figures **URL:** \ **Category:** design\ **Created:** [April 28, 2019, 12:32am UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731 "2019-04-28T00:32:04Z")\ **Posts on this page:** 5\ **Page:** 1
**Author:** ![elecktra](https://avatars.discourse-cdn.com/v4/letter/e/edb3f5/32.png) [@elecktra](https://forum.kirupa.com/u/elecktra)\ **Post date:** [April 28, 2019, 12:32am UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731/1 "2019-04-28T00:32:04Z")
Hi, I want to replicate this image. I do not imagine how to specify the “radio”. Does anyone have any ideas? Thanks! ![circulos_progresivos](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/d/d11cbbb965ae2949baefa6250a3a6fc770c269a4.jpeg) var n = 17 var radio = 6 function draw() { var ctx = document.getElementById(‘canvas’).getContext(‘2d’); for (var i = 0; i \< n; i++) { for (var j = 0; j \< n; j++) { ctx.fillStyle = “black”; ctx.beginPath(); ctx.arc(12.5 + j \* 25, 12.5 + i \* 25, radio, 0, Math.PI \* 2, true); ctx.fill(); } } } draw(); ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [April 30, 2019, 7:45pm UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731/2 "2019-04-30T19:45:25Z")
Are you trying to just get a grid of circles to appear, or are you also trying to get the size of the circles towards the middle to get larger? ---
**Author:** ![elecktra](https://avatars.discourse-cdn.com/v4/letter/e/edb3f5/32.png) [@elecktra](https://forum.kirupa.com/u/elecktra)\ **Post date:** [April 30, 2019, 8:30pm UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731/3 "2019-04-30T20:30:26Z")
The second, solve it with the module of the distance to the center. Thanks!. ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 1, 2019, 10:13pm UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731/4 "2019-05-01T22:13:01Z")
Gotcha! This is a fun little problem 🙂 I only spent a few minutes on it and it isn’t even remotely done, but it may help get you thinking in a different direction: ``` Canvas Grid
``` ---
**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [May 4, 2019, 5:39am UTC](https://forum.kirupa.com/t/javascript-draw-figures/639731/5 "2019-05-04T05:39:58Z")
I think this comes close: ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/a/a695d2b94d0328e95ce2e96777f9e02b247d4aa0.png) The code is: ``` Canvas Grid
```