JSFiddle - React, Tailwind, and code Playground

by Zeaklous

HTML

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


<p>Now it's fixed!</p>

<svg width="200px" height="200px" viewBox="0 0 200 200" style="border: 1px solid black;">    
         <image x="0" y="0" width="200" height="200" xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)" ></image>
</svg>
<svg width="70px" height="70px" viewBox="50 50 70 70" style="border: 1px solid black;">    
         <image x="0" y="0" width="200" height="200" xlink:href="http://placekitten.com/200/200" clip-path="url(#myClip)" ></image>
</svg>
<svg width="30px" height="30px" viewBox="50 50 70 70" style="border: 1px solid black;">    
         <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';