<canvas id="canvas" width="200" height="200">
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
canvas {
border: 1px solid #000;
}
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
for (var i = 0; i < 8; i++) {
for (var j = 0; j < 8; j++) {
ctx.strokeStyle = 'rgb(255, ' + Math.floor(255 - 42.5 * i) + ', ' +
Math.floor(255 - 42.5 * j) + ')';
ctx.beginPath();
ctx.strokeRect(j * 25, i * 25, 25, 25);
ctx.stroke();
}
}
ctx.fillStyle = 'rgba(46, 196, 182, 0.5)';
ctx.fillRect(25,25,100,100);
ctx.fillStyle = 'rgba(231, 29, 54, 0.5)';
ctx.fillRect(75,75,100,100);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.