I am facing a challenge with my previous issue and I am exploring different solutions. One approach I am considering is to remove the canvas element completely and then re-add it, effectively resetting all rotations on the canvas.
Although this method almost works, I encounter an issue when trying to redraw the chart using chart.js - nothing appears on the canvas.
I have inserted some console.log statements inside the onComplete function of chart.js and while data is logged in the console, it does not reflect on the canvas.
View the current jsfiddle where onComplete data is not visible.
Refer to this jsfiddle for the rotation issue that I am trying to address.
Previous question: Read about it here
I am creating a rotating wheel on a canvas and after rotating it, I want to reset the rotation to 0. However, due to the CSS property:
-webkit-transition: -webkit-transform 15s ease;r -> 0. Is there any way to reset the rotation without triggering the transform 15s ease?
I need to redraw the data on the canvas immediately after the rotation transformation completes, requiring an instantaneous reset.
Thank you!
var r=-(3600 + random);
$("#wheel").css("transform","rotate("+r+"deg)");
$("#wheel").css("-moz-transform","rotate("+r+"deg)");
$("#wheel").css("-webkit-transform","rotate("+r+"deg)");
$("#wheel").css("-o-transform","rotate("+r+"deg)");
$("#wheel").one('webkitTransitionEnd', function() {
$("#wheel").css("transform","none");
$("#wheel").css("-moz-transform","none");
$("#wheel").css("-webkit-transform","none");
$("#wheel").css("-o-transform","none");
});