Canvas API Basics - Drawing, Coloring, Text Rendering

Canvas API Basics: Paint Your Web Page with Pixels

HTML5 introduced the <canvas> element — a blank slate where you can draw anything: shapes, text, images, animations. With JavaScript as your brush, the Canvas API opens up a new creative layer in your web development toolkit.

Getting Started with <canvas>

The <canvas> tag defines an area for drawing. It needs JavaScript to do the painting.

Basic Setup

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #aaa;">
  Your browser does not support the canvas tag.
</canvas>>

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

[ A 300x150 canvas with a border appears ]

getContext('2d') gets a 2D drawing context — the API you'll use to render everything.

Drawing Basic Shapes

Draw a Rectangle

ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 50); // x, y, width, height

[ A solid red rectangle appears at (10,10) ]

Draw a Stroke-Only Rectangle

ctx.strokeStyle = 'green';
ctx.strokeRect(130, 10, 100, 50);

Clear a Part of the Canvas

ctx.clearRect(20, 20, 30, 20); // Erases part of the red rectangle

Drawing Paths: Circles, Triangles, and More

You can draw more than rectangles by creating paths.

Draw a Circle (Arc)

ctx.beginPath();
ctx.arc(75, 100, 30, 0, 2 * Math.PI); // x, y, radius, startAngle, endAngle
ctx.fillStyle = 'blue';
ctx.fill();

[ A filled blue circle appears ]

Draw a Triangle

ctx.beginPath();
ctx.moveTo(200, 80);
ctx.lineTo(250, 130);
ctx.lineTo(150, 130);
ctx.closePath();
ctx.strokeStyle = 'purple';
ctx.stroke();

Working with Colors and Strokes

• fillStyle: sets the fill color
• strokeStyle: sets the outline color
• lineWidth: defines stroke thickness

Example: Thicker Orange Border

ctx.strokeStyle = 'orange';
ctx.lineWidth = 5;
ctx.strokeRect(10, 80, 100, 50);

Rendering Text on Canvas

ctx.font = '20px Arial';
ctx.fillStyle = 'black';
ctx.fillText('Hello World', 10, 140); // text, x, y

[ "Hello World" appears on the canvas ]

You can also stroke text with strokeText:

ctx.strokeStyle = 'red';
ctx.strokeText('Cherry', 150, 140);

Best Practices

• Set explicit width and height attributes (not just via CSS)
• Always call beginPath() before new shapes
• Use layering: draw in order from background to foreground

Summary

With the Canvas API, you're not limited to pre-built HTML elements. You can:

• Draw filled and stroked shapes
• Control color, stroke, and line width
• Render styled text directly on canvas

It's pixel-level creativity — in your hands.

What’s Next?

Up next, we’ll explore advanced Canvas techniques — animations, image manipulation, and dynamic interactions using mouse events.