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(1, 0, 0, 1, 0, 0);
        }

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

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