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 onclick()
{
    addEventListener(onclick);
}
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() 
{
    
    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();
        }
    };
}