JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>

<head>
    
</head>

<body>

<div id="container">
    <div id="main" role="main">
        <div class="wrapper">
            <p>Move the image so the Red quares fit in the white space.</p>
            <canvas id="canvas">
                Your browser doesn't support canvas, dude! 
            </canvas><BR>
            <input type="button" value="Save as PNG">
        </div>
    </div>
    <footer>

    </footer>
</div> <!--! end of #container -->

</body>
</html>

CSS

html {
    height:100%; }
    
div {
    display:block; }
    
body {
   background:#333;
}

.wrapper {
    width:1024px;
    margin:0 auto;
}

canvas {
    margin:40px 40px;
}

p {
    color:white;
    margin:40px 40px;
    font-size:20px;
}

input {
    font-size:20px;
    margin:40px 40px;
}

JavaScript

var can = document.getElementById('canvas');
            var ctx = can.getContext('2d');
            var img = new Image();
            
            img.onload = function(){
                can.width = 500;
                can.height = 500;
                ctx.drawImage(img, 0, 0, img.width, img.height);
       
            }
            
            img.src = 'http://i41.tinypic.com/b89q13.png';
            
            
          
        
            var imgdef = new Image();
            imgdef.onload = function(){
                ctx.drawImage(imgdef, 0, 0, imgdef.width, imgdef.height);

            }
            imgdef.src = 'http://i44.tinypic.com/9jma95.png';