JSFiddle - React, Tailwind, and code Playground

by psycketom

CSS

body
{
    background: -webkit-canvas(smiley);
    background: -moz-element(#smiley);
    
    background-position: center top;
    background-repeat: no-repeat;
}

JavaScript

var cssCanvas = document.getCSSCanvasContext ? true : false;

var smileyCanvas, smileyElement;

if (cssCanvas)
{
    smileyCanvas = document.getCSSCanvasContext('2d', 'smiley', 400, 400);
}
else
{
    smileyElement = document.createElement('canvas');
    smileyElement.width = 400;
    smileyElement.height = 400;
    smileyElement.id = 'smiley';
    
    smileyCanvas = smileyElement.getContext('2d');
}

var smiley = new Image();
smiley.src = 'http://images4.wikia.nocookie.net/__cb20080915185924/emoticon/images/1/16/Blue_smiley_face.png';
smiley.onload = function()
{
    if (!cssCanvas) document.body.appendChild(smileyElement);
    
    smileyCanvas.shadowColor = 'rgba(0, 0, 0, 0.5)';
    smileyCanvas.shadowOffsetX = -10;
    smileyCanvas.shadowOffsetY = -10;
    
    smileyCanvas.shadowBlur = 10;
    
    smileyCanvas.drawImage(this, 0, 0);
    
    if (!cssCanvas)
    {
        smileyElement.style.position = 'absolute';
        smileyElement.style.left = '-400px';
        smileyElement.style.top = '-400';
    }
};