JSFiddle - React, Tailwind, and code Playground

by Imri Paloja

HTML

<canvas id="canvas" width="1000px" height="500px"></canvas>

JavaScript

function cropImg() {
  const canvas = document.getElementById('canvas');
  const ctx = canvas.getContext('2d');

  var image = new Image();
  image.src = "https://images.unsplash.com/photo-1593642634443-44adaa06623a?ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=725&q=80";

  image.onload = function() {
    ctx.drawImage(image, 
    // 10,10,220,277
  	10, 10,	// Start at 250/100 pixels from the left and the top of the image (crop),
    220, 277,	// "Get" a `500 * 300` (w * h) area from the source image (crop),
    10, 10,		// Place the result at 60, 60 in the canvas,
    600, 600 // With as width / height: 1000 * 600 (scale)
    
    );

  }
}

cropImg();