JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id='myCanvas' width="400" height="400"></canvas>
</br>Open in Google Chrome for the ultimate experience....
<p id='myFunction'></p>
<button type="button" onclick="document.getElementById('myFunction')">Click here to change color!</button>

CSS

body {
    background-color: #fff;
    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;


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() {
    document.getElementById('draw');
    context.fillStyle = '#19FF19';
}