JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas1" width="150" height="150" style="border: 1px solid black"></canvas>

JavaScript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var img = new Image();

img.onload = function() {
    // original image size:
    console.log(img.width); // 182
    console.log(img.height); // 176
    // lets resize it to 1/4 original size
    var bigside = Math.max(img.width, img.height);
    var ratio =  0.25;
    can.width = img.width * ratio;
    can.height = img.height* ratio;
    ctx.scale(ratio, ratio); // scale by 1/4
    ctx.drawImage(img, 0, 0);
    // Lets also show the original image for comparison:
    document.body.appendChild(img);
    
    // anyway, now we can use this command to get the base64 data of the resized image:
    console.log(can.toDataURL());
}

img.src =...