JSFiddle - React, Tailwind, and code Playground

by Aqilah Misuary

HTML

<canvas id="canvas" width="400" height="400"></canvas>

JavaScript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var raf;
var running = false;

var ball = {
  x: 500,
  y: 200,
  vx: 5,
  vy: 2,
  radius: 100,
  color: 'black',
  draw: function() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
    ctx.closePath();
    ctx.fillStyle = this.color;
    ctx.fill();
  }
};

function clear() {
  ctx.fillStyle = 'rgba(255,255,255,0.3)';
  ctx.fillRect(0,0,canvas.width,canvas.height);
}

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ball.draw();
  ball.x += ball.vx;
  ball.y += ball.vy;
 // ball.vy *= .99;
 // ball.vy += .25;
  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
  ball.vy = -ball.vy;
  play();
} else {
    stop();
}
if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
  ball.vx = -ball.vx;
  play();
}
  raf = window.requestAnimationFrame(draw);
}

canvas.addEventListener('mousemove', function(e){
  if (!running) {
    clear();
    ball.x = e.clientX;
    ball.y = e.clientY;
    ball.draw();
  }
});

canvas.addEventListener("click",function(e){
  if (!running) {
    raf = window.requestAnimationFrame(draw);
    running = true;
  }
});

canvas.addEventListener("mouseover",function(e){
  window.cancelAnimationFrame(raf);
  running = false;
});

ball.draw();

var context = new AudioContext();

var oscillator = context.createOscillator();
oscillator.type = 'sine';
oscillator.start(0);

var gain = context.createGain();
gain.gain.value = 0;

getSample('https://dl.dropboxusercontent.com/u/30075450/Greek%207%20Echo%20Hall.wav', function(impulse){
    
var convolver = context.createConvolver()
var buffer = context.createBufferSource()
convolver.buffer = impulse
/* Connections */
oscillator.connect(gain);
gain.connect(convolver);
convolver.connect(context.destination);

});


function getSample(url, cb) {
  var request = new XMLHttpRequest()
  request.open('GET', url)
  request.responseType = 'arraybuffer'
 ...