JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<canvas></canvas>

CSS

canvas {
  border: 1px solid grey;
}

JavaScript

/**
 * для вопроса https://qna.habr.com/q/1028492
 * Расставить ромбики в нужных координатах, ориентируясь на виртуальные координаты?
 */
const ctx = document.querySelector('canvas').getContext('2d');
ctx.translate(150, 75); // center to center

// Fake isometric
ctx.scale(1, .618);
ctx.rotate(-Math.PI / 4);

const rhombus = (x, y, fillStyle, strokeStyle, side = 40) => {
  ctx.save()
  ctx.translate(x * side, y * side);
  ctx.fillStyle = fillStyle || 'white';
  ctx.strokeStyle = strokeStyle || 'grey';
  ctx.fillRect(-side / 2, -side / 2, side, side);
  ctx.strokeRect(-side / 2, -side / 2, side, side);
  ctx.restore();
}

rhombus(0, 0, 'gainsboro');
rhombus(1, 0, 'red');
rhombus(-1, 0, 'blue');
rhombus(0, 1, 'green');
rhombus(0, -1, 'orange');
rhombus(1, -1, 'greenyellow');
rhombus(-1, 1, 'deeppink');

rhombus(2, 2, 'firebrick');