<!doctype html>
<html>
<head>
	<title>canvas.js | transformations</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<script type="text/javascript" src="../../pattern/canvas.js"></script>
</head>
<body>
	<script type="text/canvas">
		function setup(canvas) {
			canvas.size(500, 500);
		}
		function draw(canvas) {
			canvas.clear();
			// The simplest shapes to draw are rectangle, ellipse and line.
			// line() takes four parameters: x0, y0, x1, y1, the start and end coordinates.
			// rect() and ellipse() also take four parameters: x, y, width and height.
			// The default origin point (0,0) is the top-left corner of the canvas.
			// Draw a line from x=0 (horizontal) and y=0 (vertical) to x=100 and y=200.
			// stroke() sets the current outline color using R,G,B,A values between 0.0-1.0.
			stroke(0, 0, 0, 1);
			strokewidth(0.5);
			// From now on all shapes are drawn with a black stroke.
			line(0, 0, 100, 200);
			// Ellipses are positioned from their center:
			fill(1, 0, 0, 0.5); // red
			ellipse(0, 0, 100, 100);
			// Transformations translate(), rotate(), scale() use the current origin point.
			// This means that, by default, everything rotates around (0,0).
			// So a rectangle at (50,50) will rotate around the top-left corner of the canvas.
			// Rectangles are positioned from their top-left corner:
			push();
			rotate(canvas.frame); // canvas.frame increases by +1 each animation frame.
			fill(0, 1, 0, 0.5); // green
			rect(50, 50, 100, 100);
			pop();
			// translate() can be used to relocate the transformation origin point.
			// We place the origin point at (250,250).
			// All shapes and transformation will now originate from x=250 and y=250.
			// So a rectangle drawn at x=0 and y=0
			// will rotate with its top-left corner around this point.
			// We nudge it left and up so that rotates from its center:
			push();
			translate(250, 250);
			rotate(canvas.frame);
			fill(0, 0, 1, 0.5); // blue
			rect(-100, -100, 200, 200);
			pop();
			// Transformations between push() and pop() last until pop() is called.
			// The small purple rectangle follows the mouse:
			push();
			translate(canvas.mouse.x, canvas.mouse.y);
			rotate(canvas.frame*2);
			scale(1.0 + canvas.mouse.relative_x); // scale(1.0) = 100%
			fill(1, 0, 1, 0.5); // purple = blue + red
			rect(0, 0, 20, 20);
			pop();
		}
	</script>
</body>
</html>