Canvas transformations

save, restore, translate, scale, rotate, transform, setTransform.

by MICHI CHEN

HTML

<canvas id="myCanvas1" width="600" height="600"></canvas>

JavaScript

$(function(){
	var cxt=$('#myCanvas1')[0].getContext('2d');
  //basic style
  cxt.strokeStyle="#91B766";
  cxt.strokeRect(10,10,100,100);
  cxt.save();
  
  //translate
	cxt.restore();
  cxt.save();
  cxt.strokeRect(120,10,100,100);
  cxt.translate(120,10);
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,10,100,100);
  
  //scale
  cxt.restore();
  cxt.save();
  cxt.strokeRect(300,10,100,100);
  cxt.scale(0.5,0.5);
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(600,20,100,100);
  
  //rotate
  cxt.restore();
  cxt.save();
  cxt.strokeRect(499,10,100,100);
  cxt.translate(499,10);
  cxt.rotate(5*Math.PI/180);
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(0,0,100,100);
  
  //transform
  cxt.restore();
  cxt.save();
  cxt.strokeRect(10,150,100,100);
  cxt.transform(1,0,0.5,1,-75,0);
  cxt.strokeStyle="#926BEA";
  cxt.strokeRect(10,150,100,100);
  //setTransform
  cxt.setTransform(1,0,0,1,0,0);
  cxt.strokeStyle='#B09BC0';
  cxt.strokeRect(110,150,100,100);
  
  //Mirror
  cxt.restore();
  cxt.save();
	cxt.scale(1,-1);
  cxt.font='50px Arial';
  cxt.fillText('Hello!',350,-180);
});