JSFiddle - React, Tailwind, and code Playground

by Shawn Lackey

HTML

<canvas id='myCanvas' width="400" height="400" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>
</br>Open in Google Chrome for the ultimate experience....
<button onclick="myFunction()">Click here to change color!</button>

CSS

body {
    background-color: #808080;
    font-family: Arial, Helvetica, sans-serif
}
.drop {
    float: inherit;
    width: 600px;
    height: 200px;
    background-color: #494775;
    image-orientation: initial;
}
img {
    width: 80px;
    height: 120px;
}
p {
    text-indent: 0.0em
}
#imgcntr {
    text-align: center;
    padding: 16px;
    border-image-source: url(./Cards);
}
body {
    background-color:#ededed;
    font:normal 12px/18px Arial, Helvetica, sans-serif;
}
h1 {
    display:block;
    width:600px;
    margin:20px auto;
    padding-bottom:20px;
    font:normal 24px/30px Georgia, "Times New Roman", Times, serif;
    color:#333;
    text-shadow: 1px 2px 3px #ccc;
    border-bottom:1px solid #cbcbcb;
    -moz-animation:"draw"
}
#container {
    width:600px;
    margin:0 auto;
}
#myCanvas {
    background:#333;
    border:1px solid #2e2e2e;
}
#nav {
    display:block;
    width:100%;
    text-align:center;
}
#nav li {
    display:block;
    font-weight:bold;
    line-height:21px;
    text-shadow:1px 1px 1px #fff;
    width:100px;
    height:21px;
    padding:5px;
    margin:0 10px;
    background:#e0e0e0;
    border:1px solid #ccc;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;
    float:left;
}
#nav li a {
    color:#000;
    display:block;
    text-decoration:none;
    width:100%;
    height:100%;

JavaScript

var dx = 2;
        var dy = 6;
        var y = 200;
        var x = 100;
        var color = '#' + Math.floor(Math.random() * 16777215).toString(16);

        function draw()
        {
            context = myCanvas.getContext('2d');
            context.clearRect(0, 0, 400, 400);
            context.beginPath();
            context.fillStyle = '#8096DC';
            context.arc(x, y, 15, 15, Math.PI * 2, true);
            context.closePath();
            context.fill();
            if (x < 0 || x > 400) dx = -dx;
            if (y < 0 || y > 400) dy = -dy;
            x += dx;
            y += dy;
        }
        setInterval(draw, 1);

        function myFunction()
        {
            addEventListener(onclick) = getElementById('draw').context.fillStyle('color');


            CanvasRenderingContext2D.prototype.clear = CanvasRenderingContext2D.prototype.clear ||      function (preserveTransform)
            {
                if (preserveTransform)
                {
                    this.save();
                    this.setTransform(0, 0, 400, 400);
                }

                this.clearRect(0, 0, 400, 400, this.canvas.width, this.canvas.height);

                if (preserveTransform)
                {
                    this.restore();
                }
            };
        }