Canvas Rectangles
Rectangles are the one shape Canvas draws without a path — fillRect(), strokeRect(), and clearRect() paint, outline, and erase a rectangular region in a single call.
Rectangles Don't Need a Path
Unlike every other shape in Canvas, rectangles have three dedicated convenience methods that skip beginPath(), moveTo(), and lineTo() entirely: fillRect(), strokeRect(), and clearRect(). Each one takes the same four arguments — x, y, width, and height — where (x, y) is the top-left corner and width/height extend to the right and down.
Filling Rectangles with fillRect()
fillRect(x, y, width, height) paints a solid rectangle using whatever fillStyle is currently set on the context — a CSS color string, a gradient, or a pattern. If you never set fillStyle, Canvas defaults to opaque black. Because fillRect() draws immediately, you can call it repeatedly with different styles to build up a composition without ever touching a path.
Example
<!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>Outlining with strokeRect() and Erasing with clearRect()
strokeRect(x, y, width, height) draws only the rectangle's outline using the current strokeStyle and lineWidth, leaving the interior untouched. clearRect(x, y, width, height) does the opposite of filling — it resets every pixel in that region to fully transparent, regardless of what was drawn there before. clearRect() is the standard way to erase part or all of a canvas, most commonly canvas.clearRect(0, 0, canvas.width, canvas.height) to wipe the entire surface before redrawing an animation frame.
Example
<!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 = '#facc15';
ctx.fillRect(30, 30, 180, 120);
ctx.strokeStyle = '#78350f';
ctx.lineWidth = 6;
ctx.strokeRect(30, 30, 180, 120);
// Punch a transparent window out of the middle
ctx.clearRect(90, 65, 60, 50);
</script>
</body>
</html>- fillRect(x, y, w, h) paints a solid rectangle with the current fillStyle
- strokeRect(x, y, w, h) draws only the outline with strokeStyle and lineWidth
- clearRect(x, y, w, h) erases a region back to full transparency
- All three take the same (x, y, width, height) argument order
- None of the three requires beginPath(), moveTo(), or lineTo()
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');
let x = 20;
function drawFrame() {
// Wipe the whole canvas before redrawing
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#6366f1';
ctx.fillRect(x, 60, 40, 40);
x += 5;
if (x < canvas.width) {
requestAnimationFrame(drawFrame);
}
}
drawFrame();
</script>
</body>
</html>Exercise: Canvas Rectangles
What are the four parameters passed to fillRect()?
