JSFiddle - React, Tailwind, and code Playground

by Egor Jsfiddle

HTML

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

CSS

body {
  background: #fff;
}

canvas {
  border: 1px solid silver;
}

JavaScript

var canvas = document.getElementById("canvas");
const pi = 3.14159 * 25;
//alert(canvas.width/10);
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");

  ctx.strokeStyle = "silver";

  for (var i = 0; i < canvas.width; i += 25) {
    for (var j = 0; j < canvas.height; j += 25) {
      ctx.strokeRect(i, j, 25, 25);
    }
  }

  ctx.strokeStyle = "black";
  ctx.beginPath()
  ctx.moveTo(canvas.width / 2, 0)
  ctx.lineTo(canvas.width / 2, canvas.height)

  ctx.stroke()

  ctx.beginPath()
  ctx.moveTo(0, canvas.height / 2)
  ctx.lineTo(canvas.width, canvas.height / 2)
  ctx.stroke()

  ctx.strokeStyle = "olive";
  ctx.beginPath();
  ctx.moveTo(canvas.width / 2, canvas.height / 2);
  ctx.quadraticCurveTo(canvas.width / 2 + pi, canvas.height/2 + pi, 600, 150);
  ctx.lineWidth = 4;
  ctx.stroke()
}