JSFiddle - React, Tailwind, and code Playground

by Edgar Martinez

HTML

<canvas id="canvas" style='background-color:black;' width="910px" height="1156px"></canvas>

CSS

body {
                background: #333;
            }
            #main {
                margin-top: 100px;
                text-align: center;
            }
            #canvas {
                background-color: #000;
                height: 1156px;
                width: 910px;
            }

JavaScript

var app = ( function () {
    var canvas = document.getElementById( 'canvas' ),
        context = canvas.getContext( '2d' ),
        card="https://i.ibb.co/SQj7nyV/FRONTDEGRUOP-0022-BACKGROUND.png",
        barra="https://i.ibb.co/nfHnT4C/FRONTDEGRUOP-0014-RED-RIBBON.png",
 
        // API
        public = {};
        public.loadPicture = function () {
            var imageObj = new Image();
            imageObj.src = card;
            var barraObj=new Image();
            barraObj.src=barra;

            imageObj.onload = function () {
                context.drawImage( imageObj, 100, 20 );
                context.drawImage(barraObj, 100, 520 );
            }
        };
                // Public methods goes here...
 
        return public;
} () );

app.loadPicture();