pixelbutler/build/render/CanvasRenderer.js

Low-res bitmap render engine for big screens

'use strict';
function clearAlpha(data) {
    var lim = data.length;
    for (var i = 3; i < lim; i++) {
        data[i] = 255;
    }
}
var CanvasRender = (function () {
    function CanvasRender(bitmap, canvas) {
        this.canvas = canvas;
        this.px = bitmap.data;
        this.width = bitmap.width;
        this.height = bitmap.height;
        this.channels = bitmap.useAlpha ? 4 : 3;
        this.ctx = this.canvas.getContext('2d');
        this.output = this.ctx.createImageData(this.canvas.width, this.canvas.height);
        clearAlpha(this.output.data);
        this.ctx.putImageData(this.output, 0, 0);
    }
    CanvasRender.prototype.resize = function () {
        if (this.output.width !== this.canvas.width || this.output.height !== this.canvas.height) {
            this.output = this.ctx.createImageData(this.canvas.width, this.canvas.height);
            clearAlpha(this.output.data);
        }
    };
    CanvasRender.prototype.update = function () {
        var data = this.output.data;
        var width = this.output.width;
        var height = this.output.height;
        var fx = this.width / width;
        var fy = this.height / height;
        for (var iy = 0; iy < height; iy++) {
            for (var ix = 0; ix < width; ix++) {
                var x = Math.floor(ix * fx);
                var y = Math.floor(iy * fy);
                var read = (x + y * this.width) * this.channels;
                var write = (ix + iy * width) * 4;
                data[write] = this.px[read];
                data[write + 1] = this.px[read + 1];
                data[write + 2] = this.px[read + 2];
            }
        }
        this.ctx.putImageData(this.output, 0, 0);
    };
    CanvasRender.prototype.destruct = function () {
        this.px = null;
        this.ctx = null;
        this.canvas = null;
        this.output = null;
    };
    return CanvasRender;
})();
module.exports = CanvasRender;