JSFiddle - React, Tailwind, and code Playground

HTML

<p>Original was 1600x1200, reduced to 400x300 canvas</p><br/>
<canvas id="canvas" width=100 height=100></canvas>

CSS

body{ background-color: ivory; }
canvas{border:1px solid red;}

JavaScript

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");

img=new Image();
img.onload=function(){

  /// step 1
  var oc = document.createElement('canvas'),
      octx = oc.getContext('2d');
  oc.width = img.width * 0.5;
  oc.height = img.height * 0.5;
  octx.drawImage(img, 0,0, oc.width,oc.height);

  /// step 2
  octx.drawImage(oc,0,0,oc.width * 0.5,oc.height * 0.5);

  canvas.width=400;
  canvas.height=250;
  ctx.drawImage(oc,0,0,oc.width * 0.5, oc.height * 0.5,
                0,0,canvas.width,canvas.height);
}
img.src="https://i.stack.imgur.com/cYfuM.jpg";