JSFiddle - React, Tailwind, and code Playground

by abhishek_soni

HTML

<html>

  <head>
    <style type="text/css">
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      canvas {
        display: block;
        background: #fff;
      }

    </style>
  </head>

  <body>
    <canvas id="canvas"></canvas>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
    <script type="text/babel">
      {
      
      function colors(){
      
      let colors = ['green','blue','red']
        return 'green, red';
        };
        
        let BackgroundColor = '#fff';
        let PointColor = colors();
        let LineColor = PointColor;
        let PointSize = 40;
        let MaxPointDistance = 100;
        let MaxWalkDistance = 5;

        class Point {
          constructor (x, y, radius) {
            this.x = x;
            this.y = y;
            this.radius = radius + 5;
          }

          random_walk () {
            let random, x, y;
            if( (random = Math.random()) > 0.5){
              this.x += random * MaxWalkDistance
            }else{
              this.x -= random * MaxWalkDistance
            }
            if( (random = Math.random()) > 0.5){
              this.y += random * MaxWalkDistance
            }else{
              this.y -= random * MaxWalkDistance
            }
            if(this.x > window.innerWidth || this.x < 0){
              this.x = parseInt(Math.random() * window.innerWidth);
            }
            if(this.y > window.innerHeight || this.y < 0){
              this.y = parseInt(Math.random() * window.innerHeight);
            }
          }
          draw (color) {
            context.beginPath();
            context.fillStyle = color;
            context.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
            context.fill();
            context.closePath();
          }
          drawLines (color) {
            for(var j=0; j < PointSize; j++){
        ...