Try it Yourself: Canvas Rectangles

Canvas Rectangles

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.fillStyle = '#0ea5e9';
ctx.fillRect(20, 20, 100, 60);

ctx.fillStyle = '#f43f5e';
ctx.fillRect(140, 20, 100, 60);

ctx.fillStyle = '#22c55e';
ctx.fillRect(80, 100, 100, 60);
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>

<script>
const ctx = document.getElementById('scene').getContext('2d');

ctx.fillStyle = '#0ea5e9';
ctx.fillRect(20, 20, 100, 60);

ctx.fillStyle = '#f43f5e';
ctx.fillRect(140, 20, 100, 60);

ctx.fillStyle = '#22c55e';
ctx.fillRect(80, 100, 100, 60);
</script>

</body>
</html>