To create mirror transformation using html5 canvas, We apply
a negative scale in the x direction to flip the context horizontally.
To flip the context vertically , we apply a negative scale in the y direction.
================================================
how to create mirror transform using html5 canvas
mirrortransform html5 canvas tutorial
================================================
<!DOCTYPE html>
<html>
<head>
<title>Drawing </title>
</head>
<body>
<canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >
</canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
// translate context to center of canvas
context.translate(canvas.width / 2, canvas.height / 2);
// flip context horizontally
context.scale(-1, 1);
context.font = '60pt Calibri';
context.textAlign = 'center';
context.fillStyle = 'green';
context.fillText('Hello World!', 0, 0);
</script>
</body>
</html>
—————————————
mirrortransform html5 canvas tutorial code out put
The mirrortransform html5 canvas tutorial live demo on codepen
[codepen_embed height=500 theme_id=1 slug_hash=’YPLzbL’ user=’aslamwaqar’ default_tab=’html’
animations=’run’]
[/codepen_embed]
—————————————
mirror transform and other live canvas demo on playground codepen
Codepen
—————————————