Stretching

HTML

<html>
<head>
</head>
<body id="body">
<canvas id="canvas"></canvas>
</body>
</html>

JavaScript

const canvas = document.getElementById('canvas');

canvas.style.width = '400px';
canvas.style.height = '400px';
canvas.style.border = '2px solid black';

const ctx = canvas.getContext('2d');
const w = canvas.width/4;
const h = canvas.height/4;
var relativeAngle = 0;
//(Target is the position I want it; in this case, right in the middle)
const targetX = canvas.width/2;
const targetY = canvas.height/2;
var targetDist = Math.sqrt(targetX ** 2 + targetY ** 2);
var targetAngle = Math.atan(targetY / targetX) * 180 / Math.PI;
ctx.fillStyle = 'red'

function refresh(){
	relativeAngle += 1;
	let targetRelativeAngle = targetAngle - relativeAngle;
	let targetRelativeX = targetDist * Math.cos(targetRelativeAngle * Math.PI / 180);
	let targetRelativeY = targetDist * Math.sin(targetRelativeAngle * Math.PI / 180);
	ctx.clearRect(0,0,canvas.width,canvas.height);
	ctx.save();
	
	ctx.rotate(relativeAngle * Math.PI / 180);
	ctx.translate(targetRelativeX,targetRelativeY);
	ctx.fillRect(-w/2,-h/2,w,h);
  
	ctx.restore();
  window.requestAnimationFrame(refresh);
}
refresh();