JSFiddle - React, Tailwind, and code Playground

by Jon-Carlos Rivera

HTML

<div id="container"><canvas id="canvas"></canvas></div>
<button id="fullscreen">Go Big</button>

CSS

#container {
    position: relative;
    text-align:center;
    background:#111;
}

#canvas {
    min-height:100%;
    width:auto;
    background:#eee;
}

JavaScript

var canvas = document.querySelector("#canvas"),
    container = document.querySelector("#container"),
    button = document.querySelector("#fullscreen"),
    ctx = canvas.getContext("2d");

var x = 0, y = 0, w = 400, h = 400;

canvas.width = w;
canvas.height = h;
container.style.width = w + "px";
container.style.height = h + "px";

function drawIt(){
    ctx.clearRect(0,0,w,h);
    ctx.strokeStyle = "rgb(255, 0,0);";
    ctx.beginPath();
    var nx = pt(w),
        ny = pt(h);
    ctx.moveTo(x, y);
    ctx.lineTo(nx, ny);
    x = nx; 
    y = ny;
    ctx.stroke();
    ctx.closePath();
    requestAnimationFrame(drawIt);
}
drawIt();
function pt(max){
        return Math.floor(Math.random() * max);
}

function logit(){console.log(arguments);}

button.addEventListener("click", function(){
    if (BigScreen.enabled) {
        BigScreen.request(canvas.parentNode, function(){
            container.style.width = "100%";
            container.style.height = "100%";
        }, function(){
            container.style.width = w + "px";
            container.style.height = h + "px";
        }, logit);
    }
});

// BigScreen v2.0.2 - 2013-07-03 - Apache 2.0 License
!function(a,b,c){"use strict";function d(a){var b=null;if("VIDEO"===a.tagName)b=a;else{var c=a.getElementsByTagName("video");c[0]&&(b=c[0])}return b}function e(a){var b=d(a);if(b&&b.webkitEnterFullscreen){try{b.readyState<b.HAVE_METADATA?(b.addEventListener("loadedmetadata",function e(){b.removeEventListener("loadedmetadata",e,!1),b.webkitEnterFullscreen(),l=!!b.getAttribute("controls")},!1),b.load()):(b.webkitEnterFullscreen(),l=!!b.getAttribute("controls")),k=b}catch(c){return r("not_supported",a)}return!0}return r(void 0===j.request?"not_supported":"not_enabled",a)}function f(){s.element||(q(),h())}function g(){c&&"webkitfullscreenchange"===j.change&&a.addEventListener("resize",f,!1)}function h(){c&&"webkitfullscreenchange"===j.change&&a.removeEventListener("resize",f,!1)}var i="undefined"!=typeof...