In HTML5 canvas, I have a wheel, that I'm trying to spin, however the wheel is acting really crazy. It's being swung around the screen, out of it and into it again.
var canvas = document.getElementById("my-canvas");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "http://www.roulette30.com/wp-content/uploads/americanroulette.png";
ctx.drawImage(img, 70, 70, 200, 200);
function spinWheel() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.translate(0, 0, canvas.width, canvas.height);
ctx.rotate(1 * Math.PI / 180);
ctx.drawImage(img, 70, 70, 200, 200);
}
setInterval(spinWheel, 0);#my-canvas {
border: 1px solid black;
}<!--<img id="my-image" height="200" width="200" src="http://www.roulette30.com/wp-content/uploads/americanroulette.png">
-->
<canvas id="my-canvas" width="400" height="400"></canvas>I was certain that if I called the translate method, I could always have the wheel positioned in the center of the screen. Along with rotate, this was sure to work.
Any insights will be welcomed.