rectangle (square)

by aio350

HTML

<canvas width="300" height="300" style="border: 1px dotted #222"></canvas>

CSS

body {
  margin: 0;
  height: 100vh;
  background: radial-gradient(circle, skyblue, steelblue);
  display: flex;
  justify-content: center;
  align-items: center;
}

JavaScript

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

$.strokeStyle = 'rgba(0, 0, 0, .6)'
$.lineWidth = 2
// пустой квадрат (x, y, ширина, высота)
$.strokeRect(0, 0, 150, 150)
// цвет заливки
$.fillStyle = 'rgba(255, 0, 0, .6)'
// заполненный квадрат
$.fillRect(25, 25, 150, 150)
$.fillStyle = 'rgba(255, 0, 255, .6)'
$.fillRect(50, 50, 150, 150)
$.fillStyle = 'rgba(0, 0, 255, .6)'
$.fillRect(75, 75, 150, 150)
$.fillStyle = 'rgba(0, 255, 255, .6)'
$.fillRect(100, 100, 150, 150)
$.fillStyle = 'rgba(0, 255, 0, .6)'
$.fillRect(125, 125, 150, 150)
$.fillStyle = 'rgba(255, 255, 0, .6)'
$.fillRect(150, 150, 150, 150)