Chapter 51: Canvas Clipping
1. What is “Canvas Clipping” actually?
Canvas Clipping means defining an invisible boundary shape (a clipping region) on the canvas, and then only the parts of future drawings that fall inside that boundary are visible — everything outside is completely hidden / cut off.
It is like using a cookie cutter or a mask with hard edges:
- You draw a circle, a star, a polygon, or any path
- You tell Canvas: “From now on, only show drawings that are inside this shape”
- Then you draw images, rectangles, text, gradients, anything — and only the portion inside the clipping region appears
Very important from day one:
- Clipping is permanent until you reset it
- It affects everything drawn after the clip is set
- You must reset the clip when you’re finished (or use save/restore)
- Clipping is sharp/hard — no soft fade (for soft edges → use masking, which we will cover later)
2. How Clipping Works – The Core Methods
You need two main steps:
- Define the clipping region using normal path commands (beginPath(), arc(), rect(), moveTo(), lineTo(), closePath(), etc.)
- Call ctx.clip() — now the current path becomes the clipping mask
- Draw anything after that — only inside the clip path is visible
Resetting the clip (very important!):
- Use ctx.save() before clipping → ctx.restore() after → easiest way
- Or ctx.resetClip() (newer browsers) — but save/restore is safer and more common
3. Your First Canvas Clipping Example – Circular Photo Crop (Copy-Paste & Run)
This is the most common real-world use — making a square photo into a perfect circle avatar.
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 59 60 61 62 63 64 65 66 67 68 69 70 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas Clipping – Circular Avatar</title> <style> canvas { border: 4px solid #2c3e50; background: #ecf0f1; display: block; margin: 30px auto; } h1 { text-align: center; color: #34495e; } </style> </head> <body> <h1>Canvas Clipping – Crop Photo to Circle</h1> <canvas id="clipCanvas" width="400" height="400"></canvas> <script> const canvas = document.getElementById('clipCanvas'); const ctx = canvas.getContext('2d'); // Light background ctx.fillStyle = '#ecf0f1'; ctx.fillRect(0, 0, canvas.width, canvas.height); // Load a photo const img = new Image(); img.crossOrigin = "anonymous"; img.src = 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400'; // free portrait photo img.onload = function() { // === Step 1: Save current state (important!) === ctx.save(); // === Step 2: Define clipping region (circle) === ctx.beginPath(); ctx.arc(200, 200, 150, 0, Math.PI * 2); // center 200,200 radius 150 ctx.clip(); // Now everything drawn after this is clipped to the circle // === Step 3: Draw the image inside the clipped region === ctx.drawImage(img, 50, 50, 300, 300); // position & size to fit nicely // === Step 4: Add circular border (drawn after clip – so it is outside) === ctx.restore(); // IMPORTANT – go back to full canvas (no clip anymore) ctx.beginPath(); ctx.arc(200, 200, 150, 0, Math.PI * 2); ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 12; ctx.stroke(); // Label ctx.font = 'bold 28px Arial'; ctx.fillStyle = '#2c3e50'; ctx.textAlign = 'center'; ctx.fillText('Clipped to Circle', 200, 380); }; </script> </body> </html> |
What you see:
- Square photo cropped perfectly into a circle
- White border around the circle
- Text below explaining
This is the classic real-world clipping example — used for avatars, profile pictures, icons, thumbnails, etc.
4. All Important Clipping Techniques (With Copy-Paste Snippets)
A. Clip to Rectangle
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 |
ctx.save(); ctx.beginPath(); ctx.rect(100, 100, 400, 300); // x, y, width, height ctx.clip(); ctx.drawImage(img, 0, 0, canvas.width, canvas.height); ctx.restore(); |
B. Clip to Polygon / Star / Custom Shape
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
ctx.save(); ctx.beginPath(); ctx.moveTo(200, 50); ctx.lineTo(350, 150); ctx.lineTo(300, 300); ctx.lineTo(100, 300); ctx.lineTo(50, 150); ctx.closePath(); ctx.clip(); ctx.fillStyle = '#3498db'; ctx.fillRect(0, 0, canvas.width, canvas.height); // only pentagon visible ctx.restore(); |
C. Clip + Text (text only visible inside shape)
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ctx.save(); ctx.beginPath(); ctx.arc(300, 200, 150, 0, Math.PI * 2); ctx.clip(); ctx.font = 'bold 120px Arial'; ctx.fillStyle = '#e74c3c'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.fillText('CLIP', 300, 200); ctx.restore(); |
D. Clip + Multiple Elements
JavaScript
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
ctx.save(); ctx.beginPath(); ctx.roundRect(100, 100, 500, 300, 40); ctx.clip(); // Now everything inside is clipped to rounded rectangle ctx.fillStyle = '#2ecc71'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.drawImage(img, 100, 100, 500, 300); ctx.restore(); |
5. Teacher’s Quick Tips (Hyderabad Student Style 😄)
- Alwayssave() before clip() and restore() after — otherwise all later drawings are also clipped
- clip() uses the current path — so you must beginPath() + draw shape + clip()
- Common mistake #1: Forget restore() → everything after is clipped forever
- Common mistake #2: Draw clip shape after clip() → it gets clipped too (invisible)
- Common mistake #3: No beginPath() → clips using previous path (messy)
- Pro tip: Combine clipping + shadows + gradients → modern UI cards, avatars, buttons
- Pro tip 2: For soft/faded clipping edges → use masking instead (next topic if you want)
Understood Canvas Clipping fully now? Clipping is one of the most powerful & most-used features in Canvas — circular avatars, irregular image crops, custom-shaped cards, text reveals, vignette effects, masked animations… almost every polished canvas project uses it.
Tell me what you want next — we can build on this:
- Full circular avatar with border + shadow + clipping?
- Text clipped inside star / heart shape?
- Animated reveal (clip path growing)?
- Clipping + masking combo (hard + soft edges)?
- Or 15-question Canvas clipping quiz?
Just say — we keep going step by step together! 🚀
