HTML5 Canvas tutorial how to scale an image by transformation

HTML5 Canvas tutorial how to scale an image by transformation

html5 canvas tutorialhow to scale an image by using transformation

This html5 Canvas tutorial how to scale an image by tranformation is html5 canvas tutorial for beginner.In these tutorials we are describing basic concept of html5 Canvas. There are three forms as well as three types of transformation supported by HTML5 Canvas. The term transformation is known as revolution,conversion,modification and change. However This tranformation (modification,conversion,revolution,change) consist of three types. Moreover The transformation changes are Change of context placement(translation), size(scaling) and angle(rotation).

Transformation Types in HTML5 Canvas are:

  • transformation of translation
  • scaling transformation
  • lastone is transformation of rotation


The transformation of scaling is one kind of transformation in HTML5 Canvas by which we can apply change of size of image or text in html5 canvas.scale means increase. When we say scaling ,our meaning is increase or decrease the size of image,shape or text.The code for scale() method using html5 canvas will be.


Here x is change in width and y stands for change in height.If value of x and y is 1 there is no change. Less than 1 value means decrease and more than one means increase. For example 0.5 value will decrease to half and 2 value will double the size. When we use scale value for x and y for starting point also change ,see in below example ,the second rectangle GREEN one stating point is with coordinate(50,200),but when use scale method and change x by ratio 2 and cahnge y by ratio 0.5.The net effect will become (100,100) and second rectangle starting point is in the middle of first rectangle which has coordinate(100,100).


Complete code for html5 canvas tutorial for transformation using scale( )method

<!DOCTYPE html>
        <title>Drawing </title>
        <canvas id ="myCanvas" width ="400" height ="300" style="border: 1px solid blue;" >
            var  canvas = document.getElementById("myCanvas");
            var context =canvas.getContext('2d');
            var rectWidth=200;
            var rectHeight =200;

                //rectangle before translation
            // rectangle after scaling



Tutorial for transformation by using scale() method in browser using html5 Canvas

html5 canvas tutorial transformation using scale() method


html 5 canvas tutorial how to scale an image by transformation live presentation using codepen

[codepen_embed height=300 theme_id=1 slug_hash=’QwmaLb’ user=’aslamwaqar’ default_tab=’html’ animations=’run’]


for playground demo of HTML5 Canvas Tranforamtion using scale() method check:

HTML5 Canvas transformation by scale()method demo on codepen

for further reading suggestion

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.