JSFiddle - React, Tailwind, and code Playground

by giperon

HTML

<body>
    <canvas id='canvas' width="180" height="351"></canvas>
</body>

JavaScript

var jpeg = document.createElement('img');
var alpha = document.createElement('img');

var canvas = document.getElementById('canvas');
var canvasWidth = canvas.offsetWidth;
var canvasHeight = canvas.offsetHeight;

var oc = document.createElement('canvas');
var ocontext = oc.getContext('2d');

var oc2 = document.createElement('canvas');
var ocontext2 = oc2.getContext('2d');

jpeg.onload = function () {
    alpha.onload = function () {

        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        var context = canvas.getContext('2d');
        context.clearRect(0, 0, canvas.width, canvas.height);

        //var useAntialiasing = jpeg.height > canvas.height || jpeg.width > canvas.width;
        var useAntialiasing = false;

        if (useAntialiasing) {
            //antialiasing
            oc.width = jpeg.width;
            oc.height = jpeg.height;
            ocontext.drawImage(alpha, 0, 0, oc.width, oc.height);
            ocontext.globalCompositeOperation = 'xor';
            ocontext.drawImage(jpeg, 0, 0, oc.width, oc.height);

            var scaleFunc = function (canvasSource, n) {
                oc2.width = Math.round(canvasSource.width / 2);
                oc2.height = Math.round(canvasSource.height / 2);
                ocontext2.drawImage(canvasSource, 0, 0, oc2.width, oc2.height);
                if (n - 1 == 0) return oc2;
                return scaleFunc(oc2, n - 1);
            };
            var scaleSmallFunc = function (canvasSource, n) {
                oc2.width = Math.round(canvasSource.width + (jpeg.width - canvasSource.width) / 2);
                oc2.height = Math.round(canvasSource.height + (jpeg.height - canvasSource.height) / 2);
                ocontext2.drawImage(canvasSource, 0, 0, oc2.width, oc2.height);
                if (n - 1 == 0) return oc2;
                return scaleFunc(oc2, n - 1);
            };
            var resultCanvas;
            if ((jpeg.height > 2 * canvas.height || jpeg.width > 2 *...