JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="myCanvas" width="500" height="400"></canvas>
JavaScript
var drawFunc = function (animationValue) {
var context = $("#myCanvas")[0].getContext("2d");
context.fillStyle="#FF0000";
context.fillRect(animationValue, animationValue, 150, 75);
},
from = 0, to = 50;
// now animate using the jQuery.animate()
$({ n: from }).animate({ n: to}, {
duration: 1000,
step: function(now, fx) {
drawFunc(now);
}
});