Demo - Scale, Rotate and Custom Transform Canvas
Refer Tutorial
Canvas Scale
<canvas id="scale" width="500" height="200"></canvas>
<script>
var canvas = document.getElementById('scale');
var context = canvas.getContext('2d');
var center_X = canvas.width / 2;
var center_Y = canvas.height / 2;
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
context.scale(2,2);
context.strokeRect(15,15,35,25);
</script>
Canvas Rotation
<canvas id="rotate" width="500" height="200"></canvas>
<script>
var canvas=document.getElementById("rotate");
var context=canvas.getContext("2d");
context.rotate(20*Math.PI/180);
context.fillStyle = '#e8493f';
context.fillRect(50,40,150,70);
context.fill();
context.stroke();
</script>
Custom Transform
<canvas id="transform" width="500" height="200"></canvas>
<script>
var canvas=document.getElementById("transform");
var context=canvas.getContext("2d");
context.fillStyle="#d54c25";
context.fillRect(0,0,250,100)
context.transform(1,0.5,-0.5,1,50,10);
context.fillStyle="#1368aa";
context.fillRect(0,0,250,100);
context.transform(1,0.5,-0.5,1,30,10);
context.fillStyle="#4db849";
context.fillRect(0,0,250,100);
</script>
Beginners guide to HTML5 Canvas - Draw shapes
Global Composite Operations
