JSFiddle - React, Tailwind, and code Playground

by taylorbuley

HTML

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
        <script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
    <body>
        <div style="position: absolute; top: 50px; left: 50px">
            <canvas id="canvas" width="500" height="500">Not supported.</canvas>
        </div>
    </body>
    </html>

JavaScript

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded() {
    canvasApp();
}

function canvasSupport() {
    return Modernizr.canvas;
}

function canvasApp() {
    if (!canvasSupport()) {
        return;
    } else {
        var theCanvas = document.getElementById("canvas");
        var context = theCanvas.getContext("2d");
    }
    drawScreen();

    function drawScreen() {
        context.fillStyle = '#aaaaaa';
        context.fillRect(0, 0, 200, 200);
        context.fillStyle = '#000000';
        context.font = '20px _sans';
        context.textBaseline = 'top';
        context.fillText("Canvas!", 0, 0);
    }
}