JSFiddle - React, Tailwind, and code Playground

by Li Sen

HTML

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

Babel + JSX

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const W = canvas.width = window.innerWidth;
const H = canvas.height = window.innerHeight;

class Ball {
  constructor(radius=40, color) {
    this.x = 0;
    this.y = 0;
    this.xp = 0;
    this.yp = 0;
    this.zp = 0;
    this.vx = 0;
    this.vy = 0;
    this.vz = 0;
    this.r = radius;
    this.color = color;
    this.scaleX = 1;
    this.scaleY = 1;
    this.visible = true;
  }

  draw(ctx) {
    ctx.save();
    ctx.translate(this.x, this.y);
    ctx.scale(this.scaleX, this.scaleY);
    ctx.fillStyle = this.color;
    ctx.beginPath();
    ctx.arc(0, 0, this.r, 0, (Math.PI / 180) * 360, false);
    ctx.closePath();
    ctx.fill();
    ctx.restore();
  }
}

const ball = new Ball(50, '#fff');
ball.x = W / 2;
ball.y = H / 2;
ball.draw(ctx);