<section class="preview">
</section>

<canvas width="480" height="320">
</canvas>
p {
  color: purple;
  margin: 0.5em 0;
}

* {
  box-sizing: border-box;
}

canvas {
  border: 1px solid black;
}
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

const x = 50;
const y = 60;
const width = 100;
const height = 75;
const color = 'blue';

function drawRect(){
  ctx.clearRect(0,0,canvas.width,canvas.length);
  ctx.fillStyle = color;
  ctx.fillRect(x,y,width,height);
}
drawRect();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.