transform() method to scale , skew and move vertically and horizontally the context of a canvas

gctx.transform(1,0,0,1,0,0);

Parameter	Description	Update value	Present value
a	Horizontal Scaling
b	Horizontal skewing
c	Vertical skewing
d	Vertical Scaling
e	Horizontal Moving
f	Vertical Moving

Change the slider values to change parameters of transform and see the effect.

transform() method will have cumulative effect. So any change in transformation matrix will affect over the previous transformation matrix. Our transform() method multiples the current identity matrix with the present arguments and set the final value.

Example : If vertical scaling is set at 0.5 and then again it is given as 1.0, then final transformation matrix will have 1.5 as vertical scaling value .

If you want to apply changes to default value only, then we have to restore the basic setting by using setTransform() method.

In the above demo before the updated matrix is applied by transform() method , setTranform() method is evoked to reset the matrix to default one.

Difference between transfrom() and setTranform()

transform() method does not reset the current transformation matrix and it multiples the given values with the previously set values.
setTranform() reset the previously set ( matrix ) values to the given values.

var my_canvas=$('#my_canvas').get(0)
var gctx = my_canvas.getContext("2d");
var a=1;
var b=0;
var c=0;
var d=1;
var e=0;
var f=0;
gctx.beginPath();
///////////////////////////
my_draw=function my_draw(){	

gctx.clearRect(0, 0, my_canvas.width,my_canvas.height);
gctx.setTransform(1,0,0,1,0,0);

gctx.beginPath();
gctx.transform(a,b,c,d,e,f);
gctx.lineWidth=5;
gctx.strokeStyle='#00ff00';
gctx.rect(150,100,100,30);
gctx.fillStyle='#f00000';
gctx.font='14px Arial';
gctx.fillText('plus2net', 160,120);
gctx.stroke();

$('#slider_a_text').html(a);
$('#slider_b_text').html(b);
$('#slider_c_text').html(c);
$('#slider_d_text').html(d);
$('#slider_e_text').html(e);
$('#slider_f_text').html(f);
$('#t1').html("gctx.transform("+a+","+b+","+c+","+d+","+e+","+f+");");
}

///////////
$( "#slider_a" ).slider({
orientation:'horizontal',
min:-1,
max:+3,
step:0.5,
animate:'slow',
value:a,
disabled:false,
slide: function(event, ui) { 
a=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_b" ).slider({
orientation:'horizontal',
min:-1,
max:+1,
step:0.25,
animate:'slow',
value:b,
disabled:false,
slide: function(event, ui) { 
b=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_c" ).slider({
orientation:'horizontal',
min:-1,
max:+1,
step:0.25,
animate:'slow',
value:c,
disabled:false,
slide: function(event, ui) { 
c=ui.value;
my_draw()
} 
});
///////////////////////////////
///////////
$( "#slider_d" ).slider({
orientation:'horizontal',
min:0,
max:2,
step:0.1,
animate:'slow',
value:d,
disabled:false,
slide: function(event, ui) { 
d=ui.value;
my_draw()
} 
});
/////////////////
///////////
$( "#slider_e" ).slider({
orientation:'horizontal',
min:-400,
max:+400,
step:50,
animate:'slow',
value:e,
disabled:false,
slide: function(event, ui) { 
e=ui.value;
my_draw()
} 
});
///////////
$( "#slider_f" ).slider({
orientation:'horizontal',
min:-200,
max:+200,
step:50,
animate:'slow',
value:f,
disabled:false,
slide: function(event, ui) { 
f=ui.value;
my_draw()
} 
});
////////////////////
$('#b1').click(function(){
 a=1;
 b=0;
 c=0;
 d=1;
 e=0;
 f=0;
  my_draw();
$( "#slider_a" ).slider({value:a})
$( "#slider_b" ).slider({value:b})
$( "#slider_c" ).slider({value:c})
$( "#slider_d" ).slider({value:d})
$( "#slider_e" ).slider({value:e})
$( "#slider_f" ).slider({value:f})
})
///////////
  my_draw();

transform() method of canvas

Difference between transfrom() and setTranform()

Subscribe