<!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>