JSFiddle - React, Tailwind, and code Playground

by theodore itzaris

HTML

<canvas id="c" width=400" height="400"></canvas>

JavaScript

var canvas = new fabric.Canvas('c');
var myObjects = ['circle','square','rectangle','arc'];
var posX;
var posY;

setInterval(function () {

    var pointer = myObjects.length * Math.random();
     posX = canvas.width * Math.random();
     posY = canvas.height * Math.random();
    
    pointer = Math.round(pointer);
        
    switch (pointer){
        case 0:
            var circle = new fabric.Circle({
                  radius: 20, 
                  fill: 'red', 
                  left: posX, 
                  top: posY
                });
            canvas.add(circle);
            break;
        case 1:
             var obj = new fabric.Rect({
              left: posX, 
              top: posY,
              fill: 'green',
              width: 40,
              height: 80
            });
            canvas.add(obj);
            break;
        case 2:
            var square = new fabric.Rect({
              left: posX, 
              top: posY,
              fill: 'yellow',
              width: 50,
              height: 50
            });
            canvas.add(square);
            break;
        case 3:
              var arc = new fabric.Circle({
                  radius: 45, 
                  originX:'center',originY:'center',
                  angle: 0,startAngle: 180, endAngle: Math.PI,
                  fill: 'blue', 
                  left: posX, 
                  top: posY
                });
            canvas.add(arc);
            break;
    }
}, 
  1000);