JSFiddle - React, Tailwind, and code Playground

by Artur Stambultsian

HTML

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

JavaScript

var elem = document.getElementById('myCanvas');
var context = elem.getContext("2d");
for (var x = 0.5; x < 501; x += 10) {
context.moveTo(x, 0);
context.lineTo(x, 401);
}
for (var y = 0.5; y < 401; y += 10) {
context.moveTo(0, y);
context.lineTo(501, y);
}
context.strokeStyle = "#ccc";
context.stroke();
var n = 80;
var heightRomb = Math.sin(Math.PI/4)*n;
var heightTreug = Math.sin(Math.PI/3)*n;

/*Romb*/
context.beginPath();
context.moveTo(100, 100);
context.quadraticCurveTo(100-heightRomb, 100, 100-heightRomb, 100+heightRomb);
context.quadraticCurveTo(100-heightRomb, 100+2*heightRomb ,100, 100+2*heightRomb);
context.quadraticCurveTo(100+heightRomb, 100+2*heightRomb, 100+heightRomb, 100+heightRomb);
context.quadraticCurveTo(100+heightRomb, 100, 100, 100);
context.fill();

/*Treugolnik*/
context.beginPath();
context.moveTo(250, 100);
context.quadraticCurveTo(250-n/4, 100+heightTreug/2, 250-n/2, 100+heightTreug);
context.quadraticCurveTo(250, 100+heightTreug, 250+n/2, 100+heightTreug);
context.quadraticCurveTo(250+n/4, 100+heightTreug/2, 250, 100);
context.fill();

/*circle*/