JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
<canvas id="canvas"></canvas>

JavaScript

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

var x2=100,y2=100;
var dx=0,dy=0;
var counter=10;

canvas.width = canvas.height = 256;
var shape = {x:100, y:100, width : 50, height : 30};

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

function draw(){
if(counter>0){
    shape.x=shape.x+dx;
    shape.y=shape.y+dy;
    ctx.clearRect(0,0,256,256);
    ctx.fillStyle = "red";
    ctx.strokeStyle = "black";
		ctx.fillRect(shape.x, shape.y, shape.width, shape.height);
		ctx.strokeRect(shape.x, shape.y, shape.width,shape.height);
    counter--;
    requestAnimationFrame(draw,20)
    }
}

canvas.addEventListener("click", function(e) {
    clear();
    x2=e.clientX;
    y2=e.clientY;
    
    dx=(x2-shape.x)/10;
    dy=(y2-shape.y)/10;
    counter=10;
    draw();
});

draw();