Canvas clearRect with rounded corners

Question

I have cut out a rectangular of a canvas with ctx.clearRect(). It produces a rectangular transparent area in the image. But is there a possibility to cut it out with rounded corners?

Just like this:

My Code:

function createHolesInBg() {
    // overlay the image on the video and cut holes to see through to the video
    var image = document.getElementById('bg-one');
    var canvas = document.getElementById("window-canvas");
    var ctx = canvas.getContext("2d");
  
    ctx.drawImage(image, 0, 0);

    window.setTimeout(function() {
      ctx.clearRect(390, 150, 400, 300);
    }, 0);
};

// show video for 5 seconds and then start to cut some holes overlay bg
window.setTimeout(function() {
  createHolesInBg();
}, 0);

// mute the video after 15 seconds as its gets annoying in blog post
window.setTimeout(function() {  
  var video = document.getElementById("video-elm");
video.muted = false;
}, 0);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

#window-canvas { pointer-events: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- background video -->
<div stlye="position:absolute; top:0; left: 0;">
 <video width="1180" height="620" controls autoplay loop id="video-elm">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
  Your browser does not support HTML5 video.
</video>  
</div> 

<!-- canvas layer -->
<canvas id="window-canvas" height="620" width="1280" style="position: absolute; top:0; left:0;"></canvas>

<!-- hidden foreground image for use by Canvas -->
<img src="https://i.pinimg.com/originals/0c/80/b6/0c80b6dfc2b311bac185c0b310bb18da.jpg" style="position: absolute; top:0; left:0; display:none;" id="bg-one">

score 2 · Accepted Answer · answered Jul 08 '18 at 14:46

Create a rounded rectangle path
Clip it
Clear the whole canvas

function roundRect(ctx, x, y, width, height, radius) {
  if (typeof radius === "undefined") {
    radius = 5;
  }
  if (typeof radius === "number") {
    radius = {
      tl: radius,
      tr: radius,
      br: radius,
      bl: radius
    };
  } else {
    var defaultRadius = {
      tl: 0,
      tr: 0,
      br: 0,
      bl: 0
    };
    for (var side in defaultRadius) {
      radius[side] = radius[side] || defaultRadius[side];
    }
  }
  ctx.beginPath();
  ctx.moveTo(x + radius.tl, y);
  ctx.lineTo(x + width - radius.tr, y);
  ctx.quadraticCurveTo(x + width, y, x + width, y + radius.tr);
  ctx.lineTo(x + width, y + height - radius.br);
  ctx.quadraticCurveTo(x + width, y + height, x + width - radius.br, y + height);
  ctx.lineTo(x + radius.bl, y + height);
  ctx.quadraticCurveTo(x, y + height, x, y + height - radius.bl);
  ctx.lineTo(x, y + radius.tl);
  ctx.quadraticCurveTo(x, y, x + radius.tl, y);
  ctx.closePath();
}

function createHolesInBg() {
  // overlay the image on the video and cut holes to see through to the video
  var image = document.getElementById('bg-one');
  var canvas = document.getElementById("window-canvas");
  var ctx = canvas.getContext("2d");

  ctx.drawImage(image, 0, 0);

  setTimeout(function() {
    roundRect(ctx, 390, 150, 400, 300, 50);
    ctx.clip();
    ctx.clearRect(0, 0, canvas.width, ctx.canvas.height);
  }, 0)
}

// show video for 5 seconds and then start to cut some holes overlay bg
window.onload = function() {
  window.setTimeout(function() {
    createHolesInBg();
  }, 0);
}
// mute the video after 15 seconds as its gets annoying in blog post
window.setTimeout(function() {
  var video = document.getElementById("video-elm");
  video.muted = false;
}, 0);

body {
  background-color: #000;
  margin: 0;
  padding: 0;
}

#window-canvas {
  pointer-events: none;
}

<!-- background video -->
<div stlye="position:absolute; top:0; left: 0;">
  <video width="1180" height="620" controls autoplay loop id="video-elm">
  <source src="https://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4">
  Your browser does not support HTML5 video.
</video>
</div>

<!-- canvas layer -->
<canvas id="window-canvas" height="620" width="1280" style="position: absolute; top:0; left:0;"></canvas>

<!-- hidden foreground image for use by Canvas -->
<img src="https://i.pinimg.com/originals/0c/80/b6/0c80b6dfc2b311bac185c0b310bb18da.jpg" style="position: absolute; top:0; left:0; display:none;" id="bg-one">

score 1 · Answer 2 · answered Jul 08 '18 at 14:30

I found this code on Github: https://gist.github.com/getify/2926699

The approach is to create a clipping region of the shape you want first, then do a clearRect that includes the whole clipping region.

You can follow this sample code on how to create a rounded rectangle here: How to draw a rounded Rectangle on HTML Canvas?

Combining these two things should give you the result you're looking for.

function clearRoundRect(context, x, y, width, height, radius) {
  context.save();
  context.beginPath();
  roundRect(context, x, y, width, height, radius, false, true);
  context.clip();
  context.clearRect(x, y, width, height);
  context.restore();
}

Canvas clearRect with rounded corners

2 Answers2