JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" height="300" width="300" style="border:1px dotted #111;"
/>

JavaScript

var x = 0;
var y = 150;
var dx = 2;
var dy = 4;
var WIDTH;
var HEIGHT;

var ctx = document.getElementById("canvas").getContext("2d");
//ctx.beginPath();
//ctx.arc(150, 150, 10, 0, 2 * Math.PI, true);
//ctx.closePath();
var img = new Image();
img.src = 'http://www.wpclipart.com/toys/balls/red_snooker_ball.png';
img.width = 10;
img.height = 10;
ctx.drawImage(img, 150, 150, 10, 10);
ctx.fill();
alert("4444");

function init() {
    var ctx = document.getElementById("canvas").getContext("2d");

    return setInterval(draw, 10);
}

function draw() {
    ctx.clearRect(0, 0, 300, 300);
    //ctx.beginPath();
    //ctx.arc(x, y, 10, 0, 2 * Math.PI, true);
    //ctx.closePath();
    ctx.drawImage(img, x, y, 10, 10);
    ctx.fill();
    x += dx;
    y += dy;
    bounce();
}

function bounce() {
    if (x + dx > 293 || x + dx < 0) {
        dx = -dx;
    }
    if (y >= 290) {
        y = 290;
    }
    if (y + dy > 290 || y + dy < 0) {
        dx *= 0.99;
        dy = -dy;
    }
    if (Math.abs(dx) < 0.01) {
        dx = 0;
    }
    dy++;
}
init();