JSFiddle - React, Tailwind, and code Playground

HTML

<br/>
<p>Original was 1920x1200, reduced to 400x300 canvas</p>
<p>Original:</p>
<canvas id="canvas1" width=100 height=100></canvas>
<p>toRetina:</p>
<canvas id="canvas2" width=100 height=100></canvas>
<p>backingStoreRatio:</p>
<canvas id="canvas3" width=100 height=100></canvas>
<p>antialiasing:</p>
<canvas id="canvas4" width=100 height=100></canvas>
<img class="source" src="http://openwalls.com/image/17342/colored_lines_on_blue_background_1920x1200.jpg" />

CSS

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

JavaScript

var WIDTH = 1920 / 10;
        var HEIGHT = 1200 / 10;
        var imageURL = document.querySelector(".source").src;
        var canvas1 = _resize(document.getElementById("canvas1"), WIDTH, HEIGHT);
        var canvas2 = _resize(document.getElementById("canvas2"), WIDTH, HEIGHT);
        var canvas3 = _resize(document.getElementById("canvas3"), WIDTH, HEIGHT);
        var canvas4 = _resize(document.getElementById("canvas4"), WIDTH, HEIGHT);
        var ctx1 = canvas1.getContext("2d");
        var ctx2 = canvas2.getContext("2d");
        var ctx3 = canvas3.getContext("2d");
        var ctx4 = canvas4.getContext("2d");

        var img = new Image();
        img.onload = function() {
          var ratinaFactor = _toRetina(ctx2);
          _backingStoreRatio(ctx3);

          ctx1.drawImage(img, 0, 0, img.width, img.height, 0, 0, WIDTH, HEIGHT);
          ctx2.drawImage(img, 0, 0, img.width, img.height, 0, 0, WIDTH * ratinaFactor,
                                                                 HEIGHT * ratinaFactor);
          ctx3.drawImage(img, 0, 0, img.width, img.height, 0, 0, WIDTH, HEIGHT);

          _reduceImage(ctx4, img);
        };
        img.src = imageURL;

        function _resize(canvas, width, height) {
          canvas.width = width;
          canvas.height = height;
          return canvas;
        }

        function _toRetina(context) {
          var canvas = context.canvas;
          var dpr = window["devicePixelRatio"] || 1.0;
          var w = canvas.width;
          var h = canvas.height;
          canvas.width = w * dpr;
          canvas.height = h * dpr;
          canvas.style.width = w + "px";
          canvas.style.height = h + "px";
          var devicePixelRatio = window.devicePixelRatio || 1;
          var backingStoreRatio = _getBackingStorePixelRatio(context);
          return devicePixelRatio / backingStoreRatio;
        }

        function _backingStoreRatio(context) {
          //...