JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="myCanvas" width="100" height="100" class="canvas" onclick="rotateOnClick(this)" style="background-color: red">
Your browser does not support the HTML5 canvas tag.
</canvas>
CSS
.canvas
{
transition-duration: 0.8s;
transition-property: transform;
}
.rotator
{
-webkit-transform: rotate(90deg);
}
JavaScript
//rotate the canvs
function rotateOnClick(element)
{
element.classList.toggle('rotator');
}