JavaScript - Canvas & Graphics

Overview

Estimated time: 15–20 minutes

The Canvas API lets you draw graphics, animations, and games directly in the browser using JavaScript.

Learning Objectives

• Draw shapes and images on a canvas.
• Understand the basics of 2D graphics programming.

Prerequisites

• JavaScript - WebSockets & Streaming

Drawing on Canvas

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 100, 100);

Common Pitfalls

• Canvas coordinates start at the top-left (0,0).
• Always check for canvas support in the browser.

Summary

The Canvas API is powerful for custom graphics, games, and data visualizations in the browser.