rgba

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')

$.fillStyle = '#fd0'
$.fillRect(0, 0, 300, 60)
$.fillStyle = '#6c0'
$.fillRect(0, 60, 300, 60)
$.fillStyle = '#f0f'
$.fillRect(0, 120, 300, 60)
$.fillStyle = '#09f'
$.fillRect(0, 180, 300, 60)
$.fillStyle = '#f30'
$.fillRect(0, 240, 300, 60)

$.fillStyle = '#fff'

for (let i = 0; i < 10; i++) {
  $.fillStyle = `rgba(255, 255, 255, ${(i + 1) / 10}`
  for (let j = 0; j < 5; j++) {
    $.fillRect(5 + i * 29, 5 + j * 60, 30, 50)
  }
}