Canvas Transformation Effects
In this JavaScript canvas programming exercise you can learn to apply transformation effects like scale, skew, rotate, translate and understand the transform matrix.
<!DOCTYPE html>
<html>
<head>
<style>
body{ margin:10px; background:#666; }
#my_canvas{ background:#FFF; border:#000 1px solid; }
</style>
<script>
function draw(){
var ctx = document.getElementById('my_canvas').getContext('2d');
// scale(x, y) 1, 1 is default scale
// rotate(angle) Angle value expressed in radians
// translate(x, y) Positive or negative numbers
// transform(xScale, ySkew, xSkew, yScale, xTrans, yTrans)
// Default transform matrix is (1,0,0,1,0,0)
// setTransform(xScale, ySkew, xSkew, yScale, xTrans, yTrans)
ctx.fillStyle = '#FC0';
ctx.fillRect(50, 50, 100, 100);
ctx.transform(1,0,.5,1,0,0);
ctx.fillRect(170, 50, 100, 100);
ctx.setTransform(1,0,0,1,0,0);
ctx.fillRect(170, 170, 100, 100);
}
window.onload = draw;
</script>
</head>
<body>
<canvas id="my_canvas" width="500" height="350"></canvas>
</body>
</html>