JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<div id="world"></div>

CSS

html, body {
 height: 100%;
  width: 100%;
  padding: 0;
  margin: 0; 
 overflow: hidden;
}

#world {
    margin: 75% 0 0 0;
 width: 100%;
    height: 100%;
    background: url(http://www.world-geographics.com/cfg/public/_lib/img/maps/world/worldmap.png);
    position: absolute;
 -webkit-border-radius: 75%;   
    -webkit-box-shadow: 0 0 50px rgba(255,255,255,0.75);
}

JavaScript

var create = function(el){ return document.createElement(el); },
    get = function(el){ return document.querySelectorAll(el); },
    getStyle = function(el,prop){
        if(el.currentStyle)
            var y = x.currentStyle[prop];
        else if (window.getComputedStyle)
            var y = document.defaultView.getComputedStyle(el,null).getPropertyValue(prop);
        return y;
    },
    body = get("body")[0],
    canvas = body.appendChild(create("canvas")),
    ctx = canvas.getContext("2d");

// setup canvas *hawt*
canvas.style.width = canvas.style.height = "100%";
ctx.fillStyle = "#000";
ctx.fillRect (0, 0, parseInt(getStyle(canvas,"width")),parseInt(getStyle(canvas,"height")));

console.log(canvas);