Meme Generator

gistfile1.js

var MemeGenerator;
(function (MemeGenerator) {
    var _canvasElement;
    var _canvas;
    var _image;
    var _x;
    var _y;
    var _text;
    var _width = 640;
    var _height = 480;
    var _memePosition;
    var Meme = (function () {
        function Meme() { }
        Meme.prototype.createMeme = function (text, elementId, imageUrl, position) {
            _memePosition = position;
            _text = text;
            _canvasElement = document.querySelector("#" + elementId);
            _canvasElement.width = _canvasElement.width || _width;
            _canvasElement.height = _canvasElement.height || _height;
            _canvas = _canvasElement.getContext("2d");
            _canvas.font = "48pt Impact";
            _canvas.fillStyle = "white";
            _canvas.strokeStyle = "black";
            _image = new Image();
            _image.onload = imageLoadHandler;
            _image.src = imageUrl;
        };
        return Meme;
    })();
    MemeGenerator.Meme = Meme;    
    function imageLoadHandler(ev) {
        _canvas.drawImage(_image, 0, 0, _width, _height);
        _x = _y = 0;
        applyMemePosition();
        _canvas.fillText(_text, _x, _y);
        _canvas.strokeText(_text, _x, _y);
    }
    function applyMemePosition() {
        _memePosition.split(" ").forEach(function (token) {
            switch(token) {
                case "top":
                    _canvas.textBaseline = "hanging";
                    _y = 0;
                    break;
                case "bottom":
                    _canvas.textBaseline = "alphabetic";
                    _y = _height;
                    break;
                case "left":
                    _canvas.textAlign = "left";
                    _x = 0;
                    break;
                case "right":
                    _canvas.textAlign = "right";
                    _x = _width;
                    break;
                case "center":
                    _canvas.textAlign = "center";
                    _canvas.textBaseline = "middle";
                    _y = _height / 2;
                    _x = _width / 2;
                    break;
                default:
                    _canvas.textAlign = "left";
                    _canvas.textBaseline = "hanging";
                    _x = 0;
                    _y = 0;
                    break;
            }
        });
    }
})(MemeGenerator || (MemeGenerator = {}));