JSFiddle - React, Tailwind, and code Playground

by ziir

HTML

<canvas width="55" height="55" id="canvas" style="margin:10px auto;display:block;"/>

JavaScript

var tmpCtx = canvas.getContext("2d");    
var thumbImg = document.createElement('img');
    
    thumbImg.src = 'http://distilleryimage10.s3.amazonaws.com/8b236994364c11e3b2aa22000aeb0f9e_5.jpg';
    thumbImg.onload = function() {
        tmpCtx.save();
        tmpCtx.beginPath();
        tmpCtx.arc(25, 25, 24, 0, Math.PI * 2, true);
        tmpCtx.closePath();
        tmpCtx.strokeStyle = "rgba(0,0,0,0.7)";
        tmpCtx.stroke();
        tmpCtx.clip();
    
        tmpCtx.drawImage(thumbImg, 0, 0, 48, 48);
    };