Guardar y restaurar el contexto del canvas

Esta entrada continua la entrada anterior: Transformaciones en el canvas.
El contexto del canvas tiene una pila de estados. El estado del contexto del canvas contiene los valores actuales de distintos parámetros que se han fijado para el canvas:

• Las transformaciones: traslación, rotación, escalado
• La región de dibujo (clipping region)
• Los valores actuales de los atributos: strokeStyle, fillStyle, globalAlpha, lineWidth, lineCap, lineJoin, miterLimit, shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor, globalCompositeOperation, font, textAlign, textBaseline. 

¿Cómo recuperamos el estado del canvas después de haber hecho una serie de modificaciones? Para ello el estado del contexto se puede almacenar en una pila LIFO (Last In First Out). Lo que haremos para recuperar el estado que teníamos antes de hacer modificaciones será lo siguiente:

1. guardar el estado
2. hacer las modificaciones
3. dibujar lo que queramos con los nuevos ajustes
4. recuperar el estado

Para ello el contexto del canvas dispone de dos funciones:

• context.save(): guarda el estado actual en la parte superior de la pila
• context.restore(): saca (y aplica al contexto) el estado de la parte superior de la pila

Ejemplo

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas id="my_canvas" width="300px" height="200px"
 style="border:1px solid #000000;"></canvas> 
 <script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
      
  var x = 10;
  var y = 10;
  var w = 50;
  var h = 50;
  

  // estado original: 0
  ctx.fillRect(x, y, w, h);
  ctx.save();
 
  // estado 1 
  ctx.fillStyle = "#ff0000"; // rojo
  ctx.fillRect(x+w, y, w, h);
  ctx.save();
  
  // estado 2
  ctx.fillStyle = "#00ff00"; // verde
  ctx.fillRect(x+2*w, y, w, h);
  
  // recuperamos el estado 1
  ctx.restore();
  ctx.fillRect(x+3*w, y, w, h);
  
  // recuperamos el estado 0
  ctx.restore();
  ctx.fillRect(x+4*w, y, w, h);
 
 </script> 
</body>
</html>

 

En este ejemplo únicamente hemos modificado el color de relleno, pero el mismo principio se aplica a cualquiera de los parametros contenidos en el contexto.

Esta entrada continua la entrada anterior: Transformaciones en el canvas.

Transformaciones en el canvas

Este post tiene una continuación en la entrada: Guardar y restaurar el contexto del canvas.
Las transformaciones básicas en el  canvas son 3: traslación, rotación y escalado.
La forma en que funcionan es poco intuitiva puesto que lo que hacen no es trasladar, rotar y escalar elementos en el canvas sino que actúan sobre el origen y los ejes de coordenadas del canvas, modificando su posición, orientación y escala, de forma que los elementos dibujados antes de una transformación permanecen inalterados y los que se dibujen después de aplicar la transformación son afectados por ella.
Las transformaciones se aplican sobre el contexto del canvas.

Traslación

context.translate(x,y)
Traslada el origen de cordenadas del canvas desde la esquina superior izquierda al punto x,y.

Rotación

context.rotate(radianes)
Rota los ejes de coordenadas en torno al origen, un angulo especificado en radianes, en sentido horario. Para pasar de grados a radianes:
angulo_en_radianes = angulo_en_grados * (Math.PI/180)

Escalado

context.scale(factorX, factorY)
Mutiplica las coordenadas en el eje X e Y por el factorX y el factorY.

Ejemplo

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 <canvas id="my_canvas" width="300px" height="200px"
 style="border:1px solid #000000;"></canvas> 
 <script type="text/javascript">
  var canvas = document.getElementById('my_canvas');
  var ctx = canvas.getContext('2d');
      
  var x = 10;
  var y = 10;
  var w = 50;
  var h = 50;
  var factorX = 0.5;
  var factorY = 0.5;
  
  // escalado
  ctx.scale(factorX, factorY);
  
  ctx.fillStyle = "#ff0000"; // rojo
  ctx.fillRect(x, y, w, h);
  
  // traslación
  ctx.translate(100, 50);
  
  ctx.fillStyle = "#00ff00"; // verde
  ctx.fillRect(x, y, w, h);
  
  // rotación
  ctx.rotate(30 * Math.PI/180);
  
  // dibujamos el nuevo eje x
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(50,0);
  ctx.stroke();
  
  // y el nuevo eje Y
  ctx.beginPath();
  ctx.moveTo(0,0);
  ctx.lineTo(0,50);
  ctx.stroke();
  
  ctx.fillStyle = "#0000ff"; // azul
  ctx.fillRect(x, y, w, h);
 
 </script> 
</body>
</html>

En el ejemplo se puede probar a cambiar la escala, cambiando factorX y factorY. El ejemplo tiene factorX = 0.5 y factorY = 0.5 (mitad de escala). El tamaño normal se consigue con factorX = 1, factorY = 1 y el doble de tamaño se consigue con factorX = 2, factorY = 2.

Este post tiene una continuación en la entrada: Guardar y restaurar el contexto del canvas