How would I add a animation effect to when the Rectangle is clicked?

Question

I would like to add a spinning, (rotating) effect on the Rect when it's clicked and it must
perform a 360 degree spin that's in a constant loop and anther animation to the circle and add a gradient fill which is radial.

<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(5, 5, 150, 90);

ctx.beginPath();
ctx.arc(230,70,60,0,2*Math.PI);
ctx.stroke();
ctx.fillStyle="#ff00ff";
ctx.fill();
</script>

Answer 1

What is your global purpose?
Because if you don't have real need of using a <canvas> for that, you better must do it with html element, or even svg one, in case of other shapes than box and rounded box (including ellipses), as handling click event on a shape draw in a <canvas> is much more difficult than built-in click events ogf html or/and svg elements ^^ You can even do most of such animation without JS (in pure CSS), not for drawings inside canvas :P

Anyway, the principle of animating a drawn shape in a <canvas> is to regularly quick delete and redraw it in its new position at the new time... and for handling click on a rectangle shape inside a <canvas>, you need to listen for the onclick event of the <canvas> object, and test if mouse (pointer) position is in area of the rectangle, so user do click the shape, else he doesn't...