← Back CP 🎪 Canvas Circus
🎪 Circus Code — Step right up! You've learned variables, loops, functions, and DOM magic. Now grab the most powerful paintbrush in JavaScript: the HTML5 Canvas! Paint circles, boxes, and triangles on a blank stage — and every number you change repaints the scene instantly. You're the ringmaster now!

🎨 Paint with Code — the Canvas API

In Style Switcher you changed how things look with the DOM. The Canvas goes further — it's a blank grid you draw on with pure code! Pick a color with fillStyle, drop a shape at (x, y) with fillRect or arc, and watch your circus come alive. X goes right, Y goes down — just like graph paper flipped upside-down!

// grab the paintbrush — 2D context
var ctx = canvas.getContext("2d");
// draw a rectangle: x, y, width, height
ctx.fillStyle = "red"; ctx.fillRect(20, 20, 60, 60);
// draw a circle: center x, center y, radius
ctx.arc(120, 50, 30, 0, 6.28); ctx.fill();
🎯 Missions Change the ball's color! Make the ball HUGE! Finish all 5 challenges!
🎪 canvas-circus.js — Live Code
1// grab the canvas + paintbrush
2var canvas = document.getElementById("ring");
3var ctx = canvas.getContext("2d");
4 
5// draw the circus ring floor
6ctx.fillStyle = "#fde68a";
7ctx.fillRect(0, 210, 320, 70);
8 
9// draw the platform box
10ctx.fillStyle = "#0d9488";
11ctx.fillRect(210, 160, 90, 50);
12 
13// draw the juggling ball (circle)
14ctx.beginPath();
15ctx.arc(160, 110, 25, 0, 6.28);
16ctx.fillStyle = "red";
17ctx.fill();
18 
19// draw the big top tent (triangle)
20ctx.beginPath();
21ctx.moveTo(50, 210); ctx.lineTo(95, 90); ctx.lineTo(140, 210);
22ctx.closePath(); ctx.fillStyle = "#ef4444";
23ctx.fill();
🎨 Live Canvas — change values and watch it repaint!
📐 Move your finger over the canvas: (--, --)

🎛️ Your Ringmaster Controls

🔴 Juggling Ball
Color
Size
25
X ↔️
160
Y ↕️
110
🎪 Big Top Tent
Color
📦 Platform Box
Color

🎯 Circus Challenges

1
🔴 Paint the Ball: Change the juggling ball's color to blue — that's fillStyle!
fillStyle
✅
2
🔵 Grow the Ball: Drag the Size slider to 35 or more — that's the arc radius!
arc
✅
3
📍 Move the Ball: Drag the X slider past 220 — that's the coordinate grid!
x, y
✅
4
🎪 Paint the Tent: Change the tent color to gold — that's a triangle via moveTo/lineTo!
triangle
✅
5
🏆 Master Painter: Make the ball, tent, AND box all different colors at once!
combine
✅
🌟 Canvas Artist Progress0%

🎪 Welcome to Canvas Circus!

You've mastered variables, loops, functions, and the DOM. Now meet the HTML5 Canvas — a blank stage you paint with pure code! Change colors, sizes, and positions, and watch your circus repaint instantly.

🔴Pick a color for the juggling ball — learn fillStyle
🔵Drag sliders to change size & position — learn arc & coordinates
🎪Paint the tent & box — learn triangles & rectangles
🏆Finish all 5 challenges to become a Canvas Artist!