HTML5 Canvas Tutorial: transform – translation

Canvas Transformations: translations on the canvas

In order to perform a translation at a HTML5 Canvas, we can make use of the translate() method. The translation is described by a transformation x offset and a y offset.

context.translate(xOffset, yOffset);

Example 1: Canvas Transformations: translation of a circle from the point (0,0) to the middle of the canvas. See image 1.

<!doctype html>
<html>
<head>
<title>Canvas Transformaties: de translatie </title>
<script> 
function translation(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    var centerX = 0;
	var centerY = 0;
    var Radius = 75;
 
    // translate the context to the center of the canvas
    context.translate(canvas.width/2, canvas.height/2);
 
 	context.arc(centerX,centerY,Radius,0, 2*Math.PI,false);
	context.fillStyle="#f16529";
	context.fill();
};
    window.addEventListener("load", translation, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="210"></canvas>
</body>
</html>
Canvas Transformaties: de translatie.
Image 1. Canvas transformations: translation to the center of the Canvas.

Check this example in your browser

Next tutorial

Leave a comment