Translate: Cambiar de origen de coordenadas

Este método modifica el origen de coordenadas del canvas. Recuerda que las coordenadas de cualquier punto del canvas eran distancias en horizontal y vertical a la esquina superior izquierda, ese es el punto (0, 0). Al aplicar este método ese punto cambia de posición.

Si tienes el punto (20,15) y aplicas un translate(10, 5) ahora ese punto se habrá movido qo a la izquierda y 5 hacia abajo, ahora será el (30, 20). A paritr de ahora todas las coordenadas se medirán desde el punto (10, 5)

Este método se llama con dos valores como argumentos; primero es el valor que se suma a la coordenada horizontal y el segundo el que se suma a la vertical. Digo suma, pero si el argumento es negativo, realmente se resta.

translate(sumarX, sumarY)

En este ejemplo se dibuja un rectángulo en el punto (20, 15) luego hacemos una traslación de 25 en horizontal y vertical y volvemos a dibujar el mismo rectángulo con las mismas coordenadsa de origen. Verás que aparece desplazado respecto al primero. Aparece en el punto X = 35 (10+25 ) , Y = 40 (15+25 ).

<canvas width="600" height="300" id="mipanel" style="border: 1px solid black"></canvas>
<script> 
	var miLienzo = document.getElementById("mipanel");
	var lapiz = miLienzo.getContext("2d");
	lapiz.fillStyle="red";
	lapiz.fillRect(10, 15, 20, 20);
	lapiz.translate(25, 25);	
	lapiz.fillRect(10, 15, 20, 20);
</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 translate(25, 25) el nuevo rectángulo se dibujará a partir del punto X = 60 (35+25 ) , Y = 65 (40+25 ) medidos desde la esquina superior izquierda. Las traslaciones se acumulan.