JSFiddle - React, Tailwind, and code Playground

by loktar

HTML

<div id="container">
    <img class='img' src="http://www.misterhobbes.net/wp-content/uploads/2009/03/blackberry_storm_wallpaper_smartphone_320_480_px_free23.jpg" alt="" />
    <canvas id="gameCanvas" width="320" height="480"></canvas>
</div>

CSS

body{text-align: center;background: #f2f6f8;}
.img{position:absolute;z-index:1;}

#container{
    display:inline-block;
    width:320px; 
    height:480px;
    margin: 0 auto; 
    background: black; 
    position:relative; 
    border:5px solid black; 
    border-radius: 10px; 
    box-shadow: 0 5px 50px #333}

#gameCanvas{
    position:relative;
    z-index:20;
}

JavaScript

var canvas=document.getElementById("gameCanvas"),
    ctx = canvas.getContext("2d");

canvas.width = 320;
canvas.height = 480;

ctx.fillStyle = "red";
ctx.fillRect(160, 240, 20,20);
ctx.fillText("Im on top of the world!", 30,30);