JSFiddle - React, Tailwind, and code Playground

by m1erickson

HTML

<canvas id="canvas" width=300 height=300></canvas>

CSS

body {
        background-color: ivory;
    }
    canvas {
        border:1px solid red;
    }

JavaScript

var canvas = document.getElementById("canvas");
        var c = canvas.getContext("2d");

        function showIntro() {

            var phrase = "Click or tap screen to start";

            var logoImg = new Image();
            logoImg.onload = function () {

                c.clearRect(0, 0, canvas.width, canvas.height);

                var grd = c.createLinearGradient(0, 0, canvas.width, canvas.height);
                grd.addColorStop(0, "#9db7a0");
                grd.addColorStop(1, "#e6e6e6");
                c.fillStyle = grd;
                c.fillRect(0, 0, canvas.width, canvas.height);

                var originalWidth = logoImg.width;
                logoImg.width = Math.round((50 * document.body.clientWidth) / 100);
                logoImg.height = Math.round((logoImg.width * logoImg.height) / originalWidth);

                var logo = {
                    img: logoImg,
                    x: (canvas.width / 2) - (logoImg.width / 2),
                    y: (canvas.height / 2) - (logoImg.height / 2)
                }
                c.drawImage(logo.img, logo.x, logo.y, logo.img.width, logo.img.height);

                c.font = "bold 16px sans-serif";
                var mt = c.measureText(phrase);
                var xcoord = (canvas.width / 2) - (mt.width / 2);
                c.fillStyle = '#656565'
                c.fillText(phrase, xcoord, 30);

            }
            logoImg.src = "http://dl.dropbox.com/u/139992952/car.png";

        }

        showIntro();