JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="ddayCanvas" width="288" height="288" data-image="http://www.topdesignmag.com/wp-content/uploads/2011/07/64.png">
    <div>
        <div class="product-image"></div>
        <div class="product-box">...</div>
        <a href="#" class="overlay">...</a>
    </div>    
  </canvas>

CSS

.product-box {
  background-color: rgba(247,99,62,0.8);
}

JavaScript

// Options
var maxImageWidth = 250,
    maxImageHeight = 196,
    radius = 50;

var canvas = $('#ddayCanvas'),
    canvasWidth = canvas.width(),
    canvasHeight = canvas.height(),
    sectorColor = $('.product-box').css('background-color'),
    context = canvas[0].getContext('2d'),
    imageSrc = canvas.data('image');  


function drawDday (option) {
    
    var imageObj = new Image();
    imageObj.onload = function() {
        
        if (option == 'clip'){
            context.save();
            context.clip();
        }
        
        var imageWidth = imageObj.width,
            imageHeight = imageObj.height;
        
        if (imageWidth > maxImageWidth){
            imageHeight = imageHeight - (imageWidth - maxImageWidth);
            imageWidth = maxImageWidth;
        }
        
        if (imageHeight > maxImageHeight) {
            imageWidth = imageWidth - (imageHeight - maxImageHeight);
            imageHeight = maxImageHeight;
        }
        
        context.drawImage(imageObj, Math.ceil((canvasWidth - imageWidth) / 2), Math.ceil((canvasHeight - imageHeight) / 2), imageWidth, imageHeight);

        // Why does this rectangle not overlay the previous image?
        context.fillStyle = sectorColor;
        context.rect(0, 0, canvasWidth, canvasHeight);
        context.arc(canvasWidth/2, canvasHeight/2, radius, 0, Math.PI*2, true);
        context.fill();
    };
    
    
    imageObj.src = imageSrc;  
    
}

drawDday();