JSFiddle - React, Tailwind, and code Playground

by Ben Watts

HTML

<img id="scream" width="300" height="200" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQQOXQ6nefqn2gv05jZEEJHqgXb4-DYlE-gj5WEz-RPNKwUM0Wf5ACKiFZt" alt="The Scream">
<p>Canvas:</p>
<canvas id="myCanvas" width="300" height="200" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>

JavaScript

render = function () {
    var c = document.getElementById("myCanvas");
    var ctx = c.getContext("2d");
    var img = document.getElementById("scream");
    
    ctx.rect(25, 25, 150, 150);
    ctx.clip();

    ctx.drawImage(img, 0, 0, 300, 200);
}

render();