JSFiddle - React, Tailwind, and code Playground

HTML

<p>Native img tag, resized using 'width'</p>
<img width=500 src='https://dl.dropboxusercontent.com/s/ind49skpbiuk3zu/Al-Anbiya-21-89.png' />
<p>Canvas drawImage() resizing</p>
<canvas id=c1 width=500 height=100></canvas>
<p>Canvas drawImage() resizing, colored</p>
<canvas id=c2 width=500 height=100></canvas>
<p>Special resizing algorithm</p>
<canvas id=c3 width=500 height=100></canvas>
<p>Special resizing algorithm, colored</p>
<canvas id=c4 width=500 height=100></canvas>

JavaScript

var c1 = document.getElementById('c1');
var ctx1 = c1.getContext("2d");
var c2 = document.getElementById('c2');
var ctx2 = c2.getContext("2d");
var c3 = document.getElementById('c3');
var ctx3 = c3.getContext("2d");
var c4 = document.getElementById('c4');
var ctx4 = c4.getContext("2d");

var image = new Image();
image.crossOrigin = 'anonymous';
image.src = 'https://dl.dropboxusercontent.com/s/ind49skpbiuk3zu/Al-Anbiya-21-89.png';
$(image).load(function () {
    var image_height = Math.round((500.0 / image.width) * image.height);
    ctx1.drawImage(image, 0, 0, image.width, image.height, 0, 0, 500, image_height);
    ctx2.drawImage(image, 0, 0, image.width, image.height, 0, 0, 500, image_height);
    color_text(c2, 255, 0, 0, 500, image_height);
    var tmp_canvas = downScaleImage(image, 500.0/image.width);
    ctx3.drawImage(tmp_canvas, 0, 0);
    ctx4.drawImage(tmp_canvas, 0, 0);
    color_text(c4, 255, 0, 0, 500, image_height);    
});


function color_text(canvas, r, g, b, w, h) {
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    var pixels = imageData.data;
    for (var x = 0; x < w; x++) {
        for (var y = 0; y < h; y++) {
            var redIndex = ((y - 1) * (canvas.width * 4)) + ((x - 1) * 4);
            var greenIndex = redIndex + 1;
            var blueIndex = redIndex + 2;
            var alphaIndex = redIndex + 3;
            if ((pixels[redIndex] < 240) && (pixels[greenIndex] < 240) && (pixels[blueIndex] < 240)) {
                pixels[redIndex] = r;
                pixels[greenIndex] = g;
                pixels[blueIndex] = b;
            }
        }
    }
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.putImageData(imageData, 0, 0);
}

// Slightly modified from here:
// http://stackoverflow.com/questions/18922880/html5-canvas-resize-downscale-image-high-quality
// --------------------------------

// scales the image by (float) scale < 1
// returns a canvas...