JSFiddle - React, Tailwind, and code Playground

by artwl

HTML

<div id="lotteryContainer">
</div>

JavaScript

function Lottery(id, width, height) {
    this.conId = id;
    this.conNode = document.getElementById(this.conId);
    this.background = null;
    this.mask = null;
    this.lottery = null;
    this.lotteryType = 'image';
    this.width = width || 0;
    this.height = height || 0;
}

Lottery.prototype = {
    createElement: function(tagName, attributes) {
        var ele = document.createElement(tagName);
        for (var key in attributes) {
            ele.setAttribute(key, attributes[key]);
        }
        return ele;
    },
    resizeCanvas: function(canvas, width, height) {
        canvas.width = width;
        canvas.height = height;
        canvas.getContext('2d').clearRect(0, 0, width, height);
    },
    drawLottery: function() {
        this.background = this.background || this.createElement('canvas');
        this.mask = this.mask || this.createElement('canvas');
        
        console.log(this.conNode.innerHTML);
        if (!this.conNode.innerHTML.replace(/ /g, '')) {
            this.conNode.appendChild(this.background);
            this.conNode.appendChild(this.mask);
        }
        
        var backCtx = this.background.getContext('2d');
        var maskCtx = this.mask.getContext('2d');
        
        if (this.lotteryType == 'image') {
            var image = new Image(),
                _this = this;
            image.onload = function() {
                _this.width = this.width;
                _this.height = this.height;
            }
            image.src = this.lottery;
            this.resizeCanvas(this.background, this.width, this.height);
            backCtx.drawImage(image, 0, 0);
        } else if (this.lotteryType == 'text'){
            this.width = this.width || 200;
            this.height = this.height || 50;
            this.resizeCanvas(this.background, this.width, this.height);
            backCtx.save();
            backCtx.beginPath();
            backCtx.font = "Bolb 20px Arial";
            backCtx.textAlign =...