<canvas id="canvas" width="300" height="300"></canvas>
/* Global styles come from external css https://codepen.io/GreenSock/pen/gOWxmWG */
body {
display: flex;
align-items: center;
justify-content: space-around;
min-height: 100vh;
margin: 0;
overflow: hidden;
}
#canvas {
height: 80vh;
max-height: 300px;
overflow: visible;
border: solid 2px white;
}
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "#28a92b";
let position = { x: 0, y: 0 };
function draw() {
// erase the canvas
ctx.clearRect(0, 0, 300, 300);
// redraw the square at it's new position
ctx.fillRect(position.x, position.y, 100, 100);
}
//animate x and y of point
gsap.to(position, {
x: 200,
y: 200,
duration: 4,
// unlike DOM elements, canvas needs to be redrawn and cleared on every tick
onUpdate: draw
});