JSFiddle - React, Tailwind, and code Playground

by AlexP11223

HTML

<canvas width="300" height="300"></canvas>

JavaScript

const x = 50, y = 50, a = 20;

const ctx = document.querySelector('canvas').getContext('2d');

ctx.arc(x, y, 5, 0, 2 * Math.PI);
ctx.fill();

const drawRectByPoints = (p1, p2, p3, p4, color) => {
    ctx.beginPath();
    ctx.moveTo(...p1);
    ctx.lineTo(...p2);
    ctx.lineTo(...p3);
    ctx.lineTo(...p4);
    ctx.closePath();
    ctx.strokeStyle = color;
    ctx.stroke();
}

drawRectByPoints(
    [x - a, y + a],
    [x + a, y + a],
    [x + a, y - a],
    [x - a, y - a],
    'red'
);
drawRectByPoints(
    [x, y + 2 * a],
    [x + 2 * a, y + 2 * a],
    [x + 2 * a, y],
    [x, y],
    'green'
);