Try it Yourself: Canvas Clipping

Canvas Clipping

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="300" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');

const photo = new Image();
photo.src = 'assets/photo.jpg';

photo.onload = () => {
  ctx.save();

  ctx.beginPath();
  ctx.arc(150, 150, 80, 0, Math.PI * 2);
  ctx.clip(); // everything below is confined to this circle

  ctx.drawImage(photo, 70, 70, 160, 160); // the square photo is cropped to a circle

  ctx.restore(); // remove the clip so later drawing is unrestricted
};
</script>

</body>
</html>

<!DOCTYPE html>
<html>
<body>

<canvas id="scene" width="300" height="300" style="border:1px solid #ccc;"></canvas>

<script>
const canvas = document.getElementById('scene');
const ctx = canvas.getContext('2d');

const photo = new Image();
photo.src = 'assets/photo.jpg';

photo.onload = () => {
  ctx.save();

  ctx.beginPath();
  ctx.arc(150, 150, 80, 0, Math.PI * 2);
  ctx.clip(); // everything below is confined to this circle

  ctx.drawImage(photo, 70, 70, 160, 160); // the square photo is cropped to a circle

  ctx.restore(); // remove the clip so later drawing is unrestricted
};
</script>

</body>
</html>