Es completamente normal que todo el canvas se rote ya que estas rotando el
ctx que es el canvas. Lo normal que tener un Sprite Sheet como el siguiente:
- Luego agregar la imagen al canvas usando las coordenadas adecuadas, por ejemplo si quiero el sprite(2, 3) se agregaría así:
ctx.drawImage(img, 64*1, 64*2, 64, 64, 0, 0, 64, 64)
- El primer argumento es la imagen
<img src="https://i.stack.imgur.com/gZ3c5.png">- El segundo es la coordenada "x" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la columna adecuada
- El tercero es la coordenada "y" en pixeles del sprite a extraer, se suele multiplicar por el tamaño del sprite para hallar la fila adecuada
- El cuarto y quinto son el tamaño en pixeles ancho y alto respectivamente del sprite a extraer desde el Sprite Sheet
- El sexto y séptimo son las coordenas destino
- El octavo y el noveno son los tamaños que tendrá el sprite dibujado en el canvas.
Pero si quieres trabajar con un solo sprite y transformarlo, tienes la opción de guardar el estado de tu canvas (
ctx.save()), luego voltear el canvas ya sea vertical u horizontalmente, dibujar tu sprite en las coordenadas adecuadas considerando que el canvas está volteado para al final restaurar tu canvas con
canvas.restore()- El siguiente ejemplo muestra como dibujar una imagen (sprite) de 300x150 volteado horizontalmente en un canvas de 800x600
ctx.save()
ctx.translate(800,0)
ctx.scale(-1,1)
ctx.drawImage(img,800-300,0)
ctx.restore()