HTML5 Canvas Tutorial: transform – reflection

Canvas Transformation: reflection

To perform a reflection a Canvas HTML5 we can make use of a negative scaling in the x direction or the y direction, depending on whether we want to flip an object horizontally or vertically.

// horizontal reflection
context.scale(-1,1);
 
// vertikal reflection
context.scale(1,-1);

Initial situation: The non-mirrored text.

Canvas Transformaties: De ongespiegelde tekst.
The non-mirrored text.

Check this example in your browser

Example 1: Horizontal reflection See image 1.

<!doctype html>
<html>
<head>
<title>Canvas Transformaties: horizontale spiegeling </title>
<script> 
function reflection(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    // Translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // horizontal reflection of context
    context.scale(-1, 1);
 
    context.font = "40pt Verdana";
    context.textAlign = "center";
    context.fillStyle = "red";
    context.fillText("Hoi Piepeloi!", 0, 0);
};
    window.addEventListener("load", reflection, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="210"></canvas>
</body>
</html>
Canvas Transformaties: de spiegeling.
Image 1. Canvas transformations: horizontal reflection

Check this example in your browser

Example 2: Vertical reflection See image 2.

<!doctype html>
<html>
<head>
<title>Canvas Transformaties: vertikale spiegeling </title>
<script> 
function reflection(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    // Translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // vertical reflection of context
    context.scale(1, -1);
 
    context.font = "40pt Verdana";
    context.textAlign = "center";
    context.fillStyle = "red";
    context.fillText("Hoi Piepeloi!", 0, 0);
};
    window.addEventListener("load", reflection, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="210"></canvas>
</body>
</html>
Canvas Transformaties: de vertikale spiegeling.
Image 2. Canvas transformations: vertical reflection

Check this example in your browser

Example 3: Horizontal and vertical reflection Also see image 3.

<!doctype html>
<html>
<head>
<title>Canvas Transformaties: horizontale en vertikale spiegeling </title>
<script> 
function reflection(){
    var canvas = document.getElementById("transformations");
    var context = canvas.getContext("2d");
 
    // Translate context to center of canvas
    context.translate(canvas.width / 2, canvas.height / 2);
 
    // horizontal and vertical reflection of context
    context.scale(-1, -1);
 
    context.font = "40pt Verdana";
    context.textAlign = "center";
    context.fillStyle = "red";
    context.fillText("Hoi Piepeloi!", 0, 0);
};
    window.addEventListener("load", reflection, true);
</script>
</head>
<body>	
	<canvas id="transformations" style="border: 1px solid;" width="400" height="210"></canvas>
</body>
</html>
Canvas Transformaties: de Horizontale en vertikale spiegeling.
Image 3. Canvas transformations: Horizontal and vertical reflection

Check this example in your browser

Next tutorial

Leave a comment