JSFiddle - React, Tailwind, and code Playground

by Rich Shih

HTML

<canvas id="myCanvas" width=400px height=400px />

CSS

canvas#myCanvas {}

Babel + JSX

class Circle {
  constructor() {
    let canvas = document.getElementById("myCanvas");
    this.width = canvas.getBoundingClientRect().width;
    this.height = canvas.getBoundingClientRect().height;
    this.context = canvas.getContext("2d");
    this.border = 10;
  }
  init() {
    let context = this.context;
    context.fillStyle = 'blueviolet';
    context.fillRect(0, 0, this.width, this.height);
    context.fill();
  }
  draw() {
    this.init();
    let context = this.context,
      border = this.border,
      width = this.width,
      height = this.height;
    context.beginPath();
    context.arc(width / 2, height / 2, 200 - border, 0, 2 * Math.PI, true);
    context.lineWidth = border;
    context.strokeStyle = "gainsboro";
    context.stroke()
    context.save()

    context.beginPath();
    context.arc(width / 2, height / 2, 150 - border, 0, 2 * Math.PI, true);
    context.lineWidth = border;
    context.strokeStyle = "gainsboro";
    context.stroke()

    context.beginPath();
    context.arc(width / 2, height / 2, 100 - border, 0, 2 * Math.PI, true);
    context.lineWidth = border;
    context.strokeStyle = "gainsboro";
    context.stroke()

  }
  try () {
    // https://html5.litten.com/understanding-save-and-restore-for-the-canvas-context/
    let ctx = this.context;
    ctx.fillStyle = '#FA6900';
    ctx.shadowOffsetX = 5;
    ctx.shadowOffsetY = 5;
    ctx.shadowBlur = 4;
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(0, 0, 15, 150);
    ctx.save();

    ctx.fillStyle = '#E0E4CD';
    ctx.shadowOffsetX = 10;
    ctx.shadowOffsetY = 10;
    ctx.shadowBlur = 4;
    ctx.shadowColor = 'rgba(204, 204, 204, 0.5)';
    ctx.fillRect(30, 0, 30, 150);
    ctx.save();

  }
}

const circle = new Circle()
circle.draw()
//circle.draw()