html5 canvas mirror transformation tutorial

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>
        <title>Drawing </title>

        <canvas id ="myCanvas" width ="600" height ="400" style="border: 1px solid blue;" >

            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);




mirrortransform html5 canvas tutorial code out put

mirror transform html5 canvas tutorial

The mirrortransform html5 canvas tutorial live demo on codepen

[codepen_embed height=500 theme_id=1 slug_hash=’YPLzbL’ user=’aslamwaqar’ default_tab=’html’



mirror transform and other live canvas demo on playground codepen


For further reading check

Next Lexture

Author: Habibullah Qamar

Its me Habib Ullah Qamar working as a Lecturer (Computer Sciences) in Pakistan. I have an MS(M.Phil) degree in computer sciences with specialization in software engineering from Virtual University of Pakistan Lahore. I have an experience of more than 15 years in the filed of Computer Science as a teacher. Blog Writing is my passion. I have many blogs, This one is special made with the aim of providing 100% Free online coaching and training to the students of under-graduate and postgraduate classes. Most of the students enrolled in computer sciences, information technology, software engineering and related disciplines find it difficult to understand core concepts of programming and office automation. They find difficult in understanding and solving their assignments.