JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<h5>CSS only</h5>
<canvas id="canvas1"></canvas>
<h5>CSS &amp; Javascript</h5>
<canvas id="canvas2"></canvas>
<img src="http://www.pocketberry.com/wp-content/uploads/2010/05/Palringo-icon-small.png" id="logo" />

CSS

canvas {
    width: 350px;
    height: 350px;
    margin: 10px;
    border: solid 1px;
}
img {
    display: none;
}

JavaScript

function draw(canvas) {
    var context = canvas.getContext('2d');
    context.drawImage(logo, 0, 0, 350, 350);
}

var logo;
window.onload = function() {
    logo = document.getElementById('logo');
    var canvas1 = document.getElementById('canvas1'),
        canvas2 = document.getElementById('canvas2');
    
    canvas2.width = 350;
    canvas2.height = 350;
    
    draw(canvas1);
    draw(canvas2);
};