JSFiddle - React, Tailwind, and code Playground

by abernier

HTML

<canvas id="avatar" width="800" height="800"></canvas>

CSS

#identity {display:inline-block; width:800px; height:800px;}

JavaScript

var E12 = E12 || (function (options) {
    var canvas = $('#avatar')[0],
        avatar;
    
    function draw() {
        avatar = E12.avatar({
            top: '',
            middle: '',
            bottom: ''
        });
        var ctx = canvas.getContext("2d");
        
        
        
        ctx.drawImage(image0, 0, 0, 800, 200, 0, 000, 800, 200);
        ctx.drawImage(image1, 0, 0, 800, 200, 0, 200, 800, 200);
        ctx.drawImage(image3, 0, 0, 800, 200, 0, 400, 800, 200);
    }
    
    return {
    
    };
}());

E12.avatar = function (options) {
    var ,
        parts = [],
        partsLoaded = false;
    
    function loadParts() {
        parts[0] = E12.avatar.part({
            src: '',
            onload: function () {
            
            }
        });
    }
    
    
};

E12.avatar.part = function (options) {
    var el = new Image();
    
    el.onload = options.onload;
    el.src = options.src;
    
    return el;
};


E12.avatar.draw();