Chapter 35: JavaScript Graphics
Step 1: What is JavaScript Graphics? (Very Simple & Clear Definition)
JavaScript Graphics means using JavaScript code to:
- Draw shapes, lines, curves, text, images
- Fill colors, gradients, patterns
- Animate everything (move, rotate, bounce, fade, explode…)
- Manipulate existing images (filters, cropping, pixel-level changes)
- Create interactive visuals (charts, games, 3D scenes, data dashboards, drawing tools…)
All of this happens directly inside the browser (no plugins, no extra software) or in Node.js with special libraries.
In short: JavaScript is no longer just for making buttons click or forms submit — it can now create almost any kind of visual content you see on modern websites, web apps, games, dashboards, creative tools, and even NFT galleries.
Step 2: The Three Main Ways to Do Graphics with JavaScript (2026 Reality)
There are three primary technologies people use — each has its own strengths:
| Technology | HTML Element / API | Best For | Learning Curve | Performance | Typical Use Cases in 2026 |
|---|---|---|---|---|---|
| Canvas 2D | <canvas> + getContext(‘2d’) | Classic 2D drawing, animations, games, charts, photo editors | Easy | Very fast | Drawing apps, 2D games, charts (Chart.js), image filters |
| SVG | <svg> element + DOM manipulation | Scalable vector graphics, icons, interactive diagrams, maps | Medium | Fast (vector) | Infographics, interactive maps, logos, data viz (D3.js) |
| WebGL | <canvas> + getContext(‘webgl’) or WebGPU | 3D scenes, high-performance graphics, games, scientific viz | Hard | Extremely fast (GPU) | 3D product viewers, games, 3D maps, data globes |
In 2026, most developers don’t write raw WebGL — they use powerful libraries that make it easy:
- Three.js → most popular for 3D
- Babylon.js → great for games
- PlayCanvas → full game engine
- p5.js → creative coding & education
- PixiJS → fast 2D rendering
- Konva.js → Canvas with easy drag & drop
Step 3: The Easiest & Most Common Starting Point — Canvas 2D
This is where almost everyone begins — and it’s still the foundation of most web graphics in 2026.
Basic structure:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<!DOCTYPE html> <html> <head> <title>My First JS Graphics</title> </head> <body> <canvas id="myCanvas" width="600" height="400" style="border:1px solid #ccc;"></canvas> <script> // 1. Get the canvas element const canvas = document.getElementById('myCanvas'); // 2. Get the 2D drawing context (your "pen") const ctx = canvas.getContext('2d'); // 3. Start drawing! // Background ctx.fillStyle = 'skyblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Orange rectangle ctx.fillStyle = 'orange'; ctx.fillRect(100, 100, 200, 150); // Yellow circle with red border ctx.beginPath(); ctx.arc(300, 200, 80, 0, Math.PI * 2); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.strokeStyle = 'red'; ctx.lineWidth = 5; ctx.stroke(); // Text ctx.font = '40px Arial'; ctx.fillStyle = 'darkblue'; ctx.fillText('Hello JS Graphics!', 120, 320); </script> </body> </html> |
Save this as graphics.html and open in your browser — you just drew a complete scene with JavaScript!
Step 4: Animation — The Real Fun Begins
Static drawings are nice — but animation is what makes JS Graphics feel alive.
Classic bouncing ball example:
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
<canvas id="canvas" width="600" height="400" style="border:1px solid #ccc;"></canvas> <script> const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); let x = 300; // x position let y = 200; // y position let dx = 4; // horizontal speed let dy = 3; // vertical speed const radius = 30; function draw() { // Clear previous frame ctx.clearRect(0, 0, canvas.width, canvas.height); // Draw ball ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fillStyle = 'crimson'; ctx.fill(); ctx.closePath(); } function update() { // Bounce on walls if (x + radius > canvas.width || x - radius < 0) dx = -dx; if (y + radius > canvas.height || y - radius < 0) dy = -dy; // Move ball x += dx; y += dy; draw(); // Ask browser to call update again (~60 fps) requestAnimationFrame(update); } update(); // start animation </script> |
This is real-time animation — 60 frames per second — all pure JavaScript.
Step 5: Quick Summary Table (Keep This Handy!)
| Technology | Best For (2026 examples) | Learning Curve | Speed | Popular Libraries (2026) |
|---|---|---|---|---|
| Canvas 2D | 2D games, charts, drawing tools, photo editors | Easy | Very fast | Raw, Konva.js, Fabric.js, p5.js |
| SVG | Scalable icons, interactive maps, infographics | Medium | Fast | D3.js, Snap.svg, Rough.js |
| WebGL / WebGPU | 3D games, product viewers, scientific viz, ML demos | Hard | Extremely fast (GPU) | Three.js, Babylon.js, PlayCanvas, wgpu |
Final Teacher Words (2026 Reality)
JS Graphics = using JavaScript to create any kind of visual content inside web pages.
- Start with Canvas 2D — draw a bouncing ball or smiley face today
- Move to SVG when you need scalable vectors (logos, maps)
- Jump to Three.js when you want 3D (rotating phone models, 3D globes)
- Use libraries — they make everything 5–10× faster to build
In 2026, almost every modern web app uses JS Graphics:
- Figma / Canva → heavy Canvas + WebGL
- Excalidraw → pure Canvas
- Google Maps → SVG + WebGL
- Three.js demos → millions of 3D product viewers
Got the big picture now? 🔥
Questions?
- Want a step-by-step smiley face animation with eyes following mouse?
- Full simple drawing app like MS Paint in browser?
- First Three.js rotating cube example?
- How to make a particle explosion effect?
Just tell me — next class is ready! 🚀
