My challenge lies in rotating an object on the canvas, as all previous frames continue to be displayed. I suspect the issue is related to this particular line of code:
setTimeout(this.rotate.bind(this), 1000 / 10);
Is there a way to have only the current frame shown?
(function () {
var spinner = {
playerx: 810 * 0.5,
playery: 600 * 0.75,
shield: 1.80,
rotation: 0,
polyxx: [0, 12, 12, 0, -12, -12],
polyyy: [-13.92, -5.35, 5.35, 13.92, 5.35, -5.35],
size: 5,
canvasInit: function () {
this.canvas = document.getElementById('loadingScreen');
this.ctx = this.canvas.getContext('2d');
},
rotate: function () {
this.rotation += 0.02;
this.shield -= 0.01;
this.ctx.strokeStyle = 'rgba(255,255,255,' + this.shield + ')';
this.ctx.save();
this.ctx.translate(this.playerx, this.playery - 10);
this.ctx.rotate(this.rotation);
this.ctx.translate(-this.playerx, -(this.playery - 10));
this.ctx.beginPath();
this.ctx.lineWidth = 17;
for (var a = 0; a < 6; a++) {
this.ctx.lineTo(this.playerx + this.polyxx[a] * this.size, this.playery - 10 + this.polyyy[a] * this.size);
}
this.ctx.closePath();
this.ctx.stroke();
this.ctx.restore();
this.loop();
},
loop: function () {
setTimeout(this.rotate.bind(this), 1000 / 10);
},
init: function () {
this.canvasInit();
this.loop();
}
};
spinner.init();
})();<body>
<canvas style="background:#000;" id="loadingScreen" width="810" height="600"></canvas>
</body>