scale

scale:

By using scale method we can increase or decrease any shapes height and width without changing height and width.See the graph and then read the Demonstration carefully.After that you have a complete idea what it is and why you should use it.

sorry your browser doesnot support canvas tag.

Hints:

In the code section you find the two for loop which is for make lines  purpose and have to relation with the scale.

ss<canvas id="scale" width="600px" height="400px" style="border:2px solid red">
sorry your browser doesnot support canvas tag.
</canvas>

<script type="text/javascript">
var sex=document.getElementById("scale");
var sec=sex.getContext("2d");
//This loop is for X values;
var x;
for(x=0;x<16;x++)
{    
sec.lineWidth=1;
sec.strokeStyle="orange";
sec.beginPath();
sec.moveTo(x*50,0);

sec.lineTo(x*50,sec.canvas.height);
sec.stroke(); 
sec.fillText(x*50+" X",x*50,10);
sec.fill();
} 
//This loop here represent Y values
var y;
for(y=0;y<15;y++)
{
sec.lineWidth=1;
sec.strokeStyle="green";
sec.beginPath();
sec.moveTo(0,y*50);

sec.lineTo(sec.canvas.width,y*50);
sec.stroke(); 
sec.fillText(y*50+" Y",2,y*50);
//sec.fill();
}

//scale tutorial start from here

sec.fillStyle="purple";
sec.fillRect(50,50,150,100);
sec.save();
sec.scale(1,0.5);
sec.fillStyle="green";
sec.fillRect(250,250,150,100);
sec.scale(1,1);
sec.fillStyle="red";
sec.fillRect(50,350,150,100);

sec.restore();
sec.fillRect(350,250,150,100);

</script>

Demonstration:

First Rectangular filled up by Purple its width is 150px and height is 100px.Start from 50,50 away from origin.Then we called scale method and give it 1,0.5.Which means remains width same 1 means full and height reduce by half o.5 means half.
Although green rectangualr have same width and height compare to the first but  green rectangular height is affected by scale method.In this scale method it told that do the height half which should have been counted.

Remember 1,1 means full height and width and below than is reduction from oiginal size and above them is higer than original size.

Third Rect,
Before third rectangular scale value is 1,1 and width and height are same as the first purple one,but height and width are appearing same as the second green one.Because third one assume that its original(alwasy count from its immediate previous one) is second one so 1,1 means same as second one.

Fourth Rect,
Fourth one is same as the first one,but height and width are same as the second and third one.Because we save the first one's current scale by save() method for future use.Then before fourth rectangular we restore all of our settings by using restore method.