canvas antialiasing_off

by giperon

HTML

<body>
    <div>
        <button onclick="rotate()">Rotate and resize me 200 times</button>
    </div>
    <div style="margin: 0 0 0 90px">
        <canvas id='canvas' width="180" height="351"></canvas>
    </div>
</body>

JavaScript

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

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

var drawImage = function() {
    var jpeg = document.createElement('img');
    var alpha = document.createElement('img');
    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) {
                    var oc2 = document.createElement('canvas');
                    var ocontext2 = oc2.getContext('2d');
                    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) {
                    var oc2 = document.createElement('canvas');
                    var ocontext2 = oc2.getContext('2d');
                    oc2.width = Math.round(canvasSource.width + (jpeg.width - canvasSource.width) / 2);
                    oc2.height = Math.round(canvasSource.height + (jpeg.height - canvasSource.height) /...