JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="1000" height="1000"> </canvas>

JavaScript

$(document).ready(function(){
  'use strict';

  var Flower = (function(){
    function Flower(range){
      this.range = range;

      this.createCanvas();
      this.drawLines();
    }

    Flower.prototype.createCanvas = function()
    {
      this.canvas = document.getElementById("canvas");
      this.ctx = this.canvas.getContext("2d");
      this.ctx.fillStyle="#000";
    }

    Flower.prototype.drawLines = function()
    {
      var coords = [
       [500 ,500],
       [500 ,400], 
       [500 ,600], 
       [412 ,450], 
       [588, 450],
       [412, 550],
       [588, 550]
      ];

      var that = this;
      coords.forEach(function(el, indx){
        that.ctx.beginPath();
        that.ctx.arc(el[0], el[1], that.range, 0, Math.PI*2, true); 
        that.ctx.closePath();
        that.ctx.stroke();
      });

    }

    return Flower;
  })();

  new Flower(100);
  for(var x = 0; x < 100; x = x + 5)
  {
    new Flower(x);
  }

  // Available under MIT License http://opensource.org/licenses/MIT

});