Scale: Cambiar escala

Este método modifica la escala de dibujo usada en el canvas. Así cualquier dibujo que hagas verá modificadas su anchura y altura así como las coordenadas del punto donde se dibuje.

Si imaginas que el canvas es un papel cuadrículado, el método scale() aumenta o disminuye el tamaño de las cuadrículas. Este cambio afecta por separado al ancho y al alto, con lo cual se puede deformar el dibujo y, por ejemplo, convertir una circunferencia en una elipse.

Este método posee dos argumentos: el primero multiplica al ancho y el segundo al alto.

scale(factorAncho, factorAlto)

MIra el efecto sobre la cuadrícula del canvas en este ejemplo.

<canvas width="600" height="300" id="panel1" style="border: 1px solid black"></canvas>

<canvas width="600" height="300" id="panel2" style="border: 1px solid black"></canvas>

<script>

var lienzo1 = document.getElementById("panel1");

var lapiz1 = lienzo1.getContext("2d");

var lienzo2 = document.getElementById("panel2");

var lapiz2 = lienzo2.getContext("2d");

function cuadricula(lapiz){

    lapiz.lineWidth = 1;

lapiz.strokeStyle = "lightgray";

inc=10;

for(i=0; i<300;i+=inc)

{

lapiz.moveTo(0, i);

lapiz.lineTo(600,i);

lapiz.stroke();

}

for(i=0; i<600;i+=inc)

{

lapiz.moveTo(i, 0);

lapiz.lineTo(i,300);

lapiz.stroke();

}

} 

//Canvas superior escala normal

cuadricula(lapiz1); 

lapiz1.fillRect(10,10,100,100);

//Escalar canvas inferior

lapiz2.scale(1, 2);

cuadricula(lapiz2);

lapiz2.fillRect(10,10,100,100);

</script>

Prueba este código

Malla del canvas antes y depués de un escalado

En este ejemplo dibujamos la cuadrícula del canvas sin transformación. Cada cuadrícula son 10 divisiones. Luego se aplica un escalado x2 al eje vertical, como ves ahora las distancias verticales son mayores. Cada cuadrícula sigue siendo 10 divisones, pero ahora estas divisiones miden el doble.

El rectángulo en el canvas superior uy en el inferior se dibjuan igual, con las mismas posiciones y dimensiones, sin embargo el inferio aparece como dole de alto y a doble distancia del lado superior.

En el siguiente ejemplo creamos un circulo rojo de radio 80 y en la posición X=300, Y=150. Al aplicar el método scale(1, 0.5) multipliamo el ancho por 1 (no cambia) y el alto por 0.5 (altura a la mitad) y a continuación se dibuja. Verás que el centro estará en X=300 Y=75 (no en 150), pues las coordenadas verticales se han multiplicaod po 0.5, la escala también afecta a las coordenadas.

<canvas width="600" height="300" id="mipanel"></canvas>

<script> 

    var miLienzo = document.getElementById("mipanel");

    var lapiz = miLienzo.getContext("2d");

    lapiz.scale(1, 0.5)

    lapiz.beginPath();

    lapiz.fillStyle = "red";

    lapiz.arc(300,150,80, 0, 2*Math.PI);

    lapiz.fill();

    lapiz.stroke();

</script>

Prueba este código

Si vuelves a aplicar este método los cambios se harán sobre los valores actuales, no sobre los originales. Es decir si vuelves a hacer un scale(1, 0.5) la escala vertical será ahora 0.25 (0.5x0.5). Las transformaciones predefinidas son relativas al estado actual del canvas.

Las transformaciones permiten modificar los dibujos modificnado la cuadrícula del canvas.