JSFiddle - React, Tailwind, and code Playground

HTML

<div id="box">
    <canvas width="300mm" height="300mm"></canvas>
</div>

CSS

#box {
    width: 150px;
    height: 150px;
    background-color: blue;
    border-radius: 50px;
    overflow: hidden;
       /* -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC); */ this fixes the overflow:hidden in Chrome/Opera
}

JavaScript

var $canvas = $("canvas");

if ($canvas[0].getContext) {
    var context = $canvas[0].getContext('2d');
    context.fillStyle = 'red';
    context.fillRect(10, 10, 300, 60);
}