JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="300" height="400"></canvas>


<p>SVG: Right now it is too large (200x200 and not 70x70) and the crop is not placed at (0,0) </p>

<svg width="200px" height="200px" style="border: 1px solid black;">


    <defs>
        <clipPath id="myClip">
            <rect x="50" y="50" width="70" height="70"/>
        </clipPath>
    </defs>
         <image x="0" y="0" width="200" height="200" xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)" ></image>

</svg>

CSS

canvas {
    border: 1px solid gray;
}

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
    ctx.fillStyle = 'red';
    ctx.font = '12px sans-serif';
    ctx.fillText('^ original image', 100, 220);
    ctx.fillText('<-- one crop', 80, 250);
    ctx.fillText('<-- another one crop, scaled', 60, 290);

var img = new Image();
img.onload = function() {
    ctx.drawImage(img, 0, 0);
    
    ctx.drawImage(img,
                  // source rect
                  50, 50, 70, 70,
                  // destination rect
                  0, 200, 70, 70
                 );
    
    ctx.drawImage(img,
                  // source rect
                  50, 50, 70, 70,
                  // destination rect
                  0, 270, 30, 30
                 );
}
img.src = 'http://placekitten.com/200/200';