Chapter 34: JS Graphics
Step 1: What is JS Graphics? (Very Simple Definition)
JS Graphics = using JavaScript to draw, animate, manipulate and create visual content directly inside a web page (or in Node.js with canvas-like libraries).
In other words: JavaScript is no longer just for buttons and forms — it can draw lines, shapes, text, images, 3D models, charts, games, data visualizations, live animations, particle effects, photo editors… everything visual you see on modern websites and web apps.
The three main ways people do graphics with JavaScript today (2026):
| Method | What it is | Best for | Difficulty | Speed / Power | Example websites / apps that use it |
|---|---|---|---|---|---|
| Canvas 2D | HTML <canvas> element + 2D drawing API | Classic 2D drawing, games, charts, animations | Easy | Very fast | Most simple games, charts, photo filters |
| WebGL | Low-level 3D graphics API (based on OpenGL ES) | 3D scenes, games, visualizations, effects | Hard | Extremely fast (GPU) | Three.js demos, 3D maps, product viewers |
| SVG | Vector graphics using XML-like tags + JS control | Scalable icons, interactive diagrams, maps | Medium | Fast (vector) | Infographics, interactive charts, logos |
| Libraries | Three.js, p5.js, PixiJS, D3.js, Konva, Paper.js | Make the above much easier & more powerful | Easy–Medium | Very fast | Almost all serious web graphics today |
Step 2: Why JavaScript Graphics Became So Important (Quick 2026 Context)
- Every modern browser supports <canvas>, WebGL, SVG → no plugins needed
- Mobile-first web → graphics must run smoothly on phones
- Web apps replaced many desktop programs (Figma, Canva, Excalidraw, Photopea…)
- Games (browser games, WebGPU demos), data dashboards, 3D product viewers, NFT galleries, live animations — all JS now
- WebGPU (newer than WebGL) is becoming mainstream → even faster 3D/compute
Step 3: The Simplest & Most Common Way – HTML Canvas 2D
This is where 99% of beginners start — and it’s still the foundation even 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 |
<canvas id="myCanvas" width="600" height="400"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // Now ctx is your drawing tool ctx.fillStyle = 'skyblue'; ctx.fillRect(0, 0, canvas.width, canvas.height); // background ctx.fillStyle = 'orange'; ctx.fillRect(100, 100, 200, 150); // rectangle ctx.beginPath(); ctx.arc(300, 200, 80, 0, Math.PI * 2); // circle ctx.fillStyle = 'yellow'; ctx.fill(); ctx.strokeStyle = 'red'; ctx.lineWidth = 5; ctx.stroke(); ctx.font = '40px Arial'; ctx.fillStyle = 'darkblue'; ctx.fillText('Hello Graphics!', 120, 300); </script> |
What this does:
- Creates a 600×400 drawing area
- Paints skyblue background
- Draws orange rectangle
- Draws yellow circle with red border
- Writes big text
→ You just drew a complete scene with pure JavaScript!
Step 4: Animation – The Next Level (Most Exciting Part)
Static drawings are nice — but animation is where JS Graphics becomes 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; // starting center x let y = 200; // starting center y let dx = 4; // speed horizontal let dy = 3; // speed vertical const radius = 30; function drawBall() { ctx.clearRect(0, 0, canvas.width, canvas.height); // clear previous frame 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; } x += dx; y += dy; drawBall(); requestAnimationFrame(update); // loop ~60 times per second } update(); // start animation </script> |
This is real-time animation — 60 frames per second — all in JavaScript.
Step 5: Quick Comparison Table (2026 View)
| Technology | Use Case Examples (2026) | Learning Curve | Performance | Library Recommendation |
|---|---|---|---|---|
| Canvas 2D | 2D games, charts, photo filters, drawing apps | Easy | Very fast | Raw or Konva.js |
| SVG | Interactive maps, icons, diagrams, infographics | Medium | Fast | D3.js, Snap.svg |
| WebGL | 3D games, product viewers, scientific visualization | Hard | Extremely fast (GPU) | Three.js, Babylon.js |
| WebGPU | Advanced 3D, compute shaders, ML inference on GPU | Very hard | Fastest | Dawn (Chrome), wgpu |
Final Teacher Summary (Repeat This to Anyone!)
JS Graphics = using JavaScript to create, draw, animate and manipulate anything visual inside web pages.
The three main paths in 2026:
- Canvas 2D → easiest, fastest for 2D (games, charts, drawing tools)
- SVG → perfect for scalable vector art & interactive diagrams
- WebGL / WebGPU → for 3D and high-performance graphics (Three.js is king)
Start with Canvas 2D — draw a bouncing ball or smiley face today — then move to Three.js when you want 3D.
Got the big picture now? 🔥
Questions?
- Want a step-by-step bouncing smiley face animation?
- Full particle explosion effect code?
- Three.js first example (rotating cube)?
- How to make a simple drawing app like MS Paint?
Just tell me — next class is ready! 🚀
