Tengo entendido que la etiqueta HTML Canvas es como una hoja de papel, y el Objeto Canvas javascript (ctx) es como una estampadora, no serían lo mismo, la hoja se queda ahí estática, lo que puede girar es la estampadora y estampar cosas.
Por otro lado puede darte problemas los Ejes de Rotación, por defecto siempre están fijos en la esquina superior izquierda, si quieres que el eje esté en centro de la figura tienes que Trasladar dicho eje con
Translate(), adicionalmente debes considerar el Eje de la Imagen ya que al estamparla se considera su eje o punto de inserción la esquina de arriba a izquierda igualmente, por esto tendrías que insertarla centrándola en el Eje del CTX poniendo coordenadas negativas iguales al ancho y alto de la imagen respectivamente:
<body></body>
<script>
var cnv = document.createElement('canvas')
cnv.style.border = '1px solid red'
document.body.appendChild(cnv)
cnv.width = 480
cnv.height = 320
var ctx = cnv.getContext('2d');
var img = new Image()
img.src = 'ruleta.png'
img.onload = function(){
ctx.translate(cnv.width/2, cnv.height/2)
setInterval(function(){
ctx.rotate(Math.PI/180 * 5)
ctx.drawImage(img, -img.width/2, -img.height/2)
}, 50)
}
</script>
Ejemplo en vivo:
https://jsbin.com/facofowetu/edit?html,output
Autor
En línea
