Cutting out rounded rectangle from canvas in JavaScript

In JavaScript, you can easily cut out rounded rectangle from existing canvas drawings, using the combination of the two technics; drawing a rounded rectangle and globalCompositionOperation = 'destination-in'.

First, you draw anything you want on any position of the canvas, then set the canvas context's globalCompositionOperation property to 'destination-in' and then fill rounded rectangle using above technic and you get rounded version of your image :)

The following function cut out rounded rectangle with given left, top, width and height and rounding radius on given canvas context.

view plainprint?

1. var cutRoundedRect = function(ctx, radius, x, y, w, h) {  
2.     var left = x;  
3.     var top = y;  
4.     var right = x + w;  
5.     var bottom = y + h;  
6.   
7.     ctx.globalCompositeOperation = 'destination-in';  
8.     ctx.fillStyle = 'black';  
9.   
10.     ctx.beginPath();  
11.     ctx.moveTo(left + radius, top);  
12.     ctx.lineTo(right - radius, top);  
13.     ctx.quadraticCurveTo(right, top, right, top + radius);  
14.     ctx.lineTo(right, bottom - radius);  
15.     ctx.quadraticCurveTo(right, bottom, right - radius, bottom);  
16.     ctx.lineTo(left + radius, bottom);  
17.     ctx.quadraticCurveTo(left, bottom, left, bottom - radius);  
18.     ctx.lineTo(left, top + radius);  
19.     ctx.quadraticCurveTo(left, top, left + radius, top);  
20.     ctx.fill();  
21. };  

var cutRoundedRect = function(ctx, radius, x, y, w, h) {
    var left = x;
    var top = y;
    var right = x + w;
    var bottom = y + h;

    ctx.globalCompositeOperation = 'destination-in';
    ctx.fillStyle = 'black';

    ctx.beginPath();
    ctx.moveTo(left + radius, top);
    ctx.lineTo(right - radius, top);
    ctx.quadraticCurveTo(right, top, right, top + radius);
    ctx.lineTo(right, bottom - radius);
    ctx.quadraticCurveTo(right, bottom, right - radius, bottom);
    ctx.lineTo(left + radius, bottom);
    ctx.quadraticCurveTo(left, bottom, left, bottom - radius);
    ctx.lineTo(left, top + radius);
    ctx.quadraticCurveTo(left, top, left + radius, top);
    ctx.fill();
};