Chapter 51: Canvas Clipping
Canvas Clipping in the clearest, most patient, step-by-step way possible. Imagine I’m sitting right next to you with my laptop open. We’re going to build every concept together — slowly, with tiny complete runnable...
Category: SVG
Chapter 52: Canvas Compositing
Canvas Compositing (also called globalCompositeOperation) in the clearest, most patient, step-by-step way possible. Imagine I’m sitting right next to you with my laptop open. We’re going to build every concept together — slowly, with...
Chapter 53: Canvas Examples
Canvas examples — complete, beautiful, useful mini-projects that show how these pieces combine in actual graphics people use every day. I’m going to teach this like your favorite teacher showing finished artwork on the...
Chapter 54: Canvas Clock
A live analog clock using Canvas. I’m going to teach this the way a patient, enthusiastic teacher would — slowly, clearly, step by step, explaining why we do every single thing, with complete runnable...
Chapter 55: Clock Intro
A clock with Canvas from the very beginning. I’m going to teach this like your favorite patient teacher who wants you to really understand — not just copy-paste and move on. We’ll go slowly,...
Chapter 56: Clock Face
Clock Face in the most detailed, clear, and patient way possible. Imagine we’re sitting together at a desk, and I’m your favorite teacher who wants you to really understand how a clock face is...
Chapter 57: Clock Numbers
Clock Numbers in the most detailed, clear, and patient way possible. Imagine we’re sitting together at a desk, and I’m your favorite teacher who wants you to really understand how the numbers on a...
Chapter 58: Clock Hands
Clock Hands in the most detailed, clear, and patient way possible. Imagine we’re sitting together at a desk. I’m your favorite teacher who wants you to really understand how the moving hands of an...
Chapter 59: Canvas Clock Start
Lesson: Canvas Clock – Starting from Absolute Zero Step 1 – The absolute bare-minimum canvas clock face (just a circle) Create this file and open it in the browser: HTML
|
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 47 48 49 50 51 52 53 54 55 56 57 58 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clock – Step 1</title> <style> body { margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background: #0d1117; } canvas { border: 8px solid #30363d; border-radius: 50%; box-shadow: 0 0 60px rgba(0,0,0,0.8); } </style> </head> <body> <canvas id="clock" width="420" height="420"></canvas> <script> const canvas = document.getElementById('clock'); const ctx = canvas.getContext('2d'); // Center helpers (you will use these in every clock) const cx = canvas.width / 2; // 210 const cy = canvas.height / 2; // 210 const radius = canvas.width / 2 - 40; // leave space for thick border // Draw the simplest possible clock face: just one big circle ctx.beginPath(); ctx.arc(cx, cy, radius, 0, Math.PI * 2); ctx.fillStyle = '#161b22'; // very dark gray face ctx.fill(); ctx.strokeStyle = '#8b949e'; // silver/gray border ctx.lineWidth = 16; ctx.stroke(); // Temporary label so we know it's working ctx.fillStyle = '#c9d1d9'; ctx.font = 'bold 28px Arial'; ctx.textAlign = 'center'; ctx.fillText('Clock Face – Step 1', cx, cy + radius + 50); </script> </body> </html> |
What we have...
Chapter 60: Plotting
Plotting in the clearest, most patient, and detailed way possible. Imagine I’m your favorite math/computer-science teacher who really wants you to understand deeply, not just memorize formulas or copy code. We are going to...
