JSFiddle - React, Tailwind, and code Playground

by bhatnagar018

HTML

<body>
<div id="container">
   <div>
    <h2>quickBurp : Tiny hack</h2>
    <p>Fork this page and change the color of the ball randomnly everytime it bounces off the wall! Send us the link to [email protected]</p>
      <canvas id="myCanvas" width="300" height="300"></canvas>
  </div>


</div>

</body>

CSS

#container { text-align:center; }
#myCanvas { background:#fff; border:1px solid #cbcbcb; text-align:center; }

JavaScript

var context;
var dx= 4;
var dy=4;
var y=150;
var x=10;
function random() 
    {
    var hex = ['0','1','2','3','4','5','6','7','8','9','A','B', 'C','D','E','F'],
    color = '#', i;
    for (i=0;i<6;i++) 
        {
        color =color+hex[Math.floor(Math.random()* 16)];
        }
    return color;
    }
function draw()
    {
    context= myCanvas.getContext('2d');
    context.clearRect(0,0,300,300);
    context.beginPath();
    context.arc(x,y,20,0,Math.PI*2,true);
    if( x<0 || x>300)
        {
        dx=-dx;
        }
    if( y<0 || y>300)
        {
        dy=-dy;
        }    
    x+=dx;
    y+=dy;
    if(x<0 || x>300 || y<0 || y>300)
        {
            context.fillStyle=random();
        }
    context.closePath();
    context.fill();
    }
setInterval(draw,10);