rect(x, y, width, height)
You can draw many things with the basic canvas drawing functions of circle, line and rect. For rect(), the x and y coordinates specify the upper left of the rectangle, relative to the top-left corner of the canvas (x:0 y:0). The width and height are measured in pixels. Rectangles are drawn using the current stroke width and current stroke color, and then filled with the current fill color (if the fill color is anything other than the default "transparent").
Examples
Example: my first rectangle
// Draw a 100x100 pixel rectangle in the top left corner.
createCanvas("canvas1");
rect(0, 0, 100, 100);
Example: big red box
Draw a rectangle offset from the top left corner.
// Draw a rectangle offset from the top left corner.
createCanvas("canvas1");
setFillColor("red");
rect(50, 50, 100, 200);
Example: thick outline
Change the thickness of the rectangle outline.
// Change the thickness of the rectangle outline.
createCanvas("canvas1");
setStrokeWidth(20);
rect(50, 50, 100, 200);
Example: two rectangles
Draw two rectangles at the same location and with the same width and height but with different stroke widths.
// Draw two rectangles at the same location and with the same width and height but with different stroke widths.
createCanvas("canvas1");
setStrokeWidth(40);
setStrokeColor("lightblue");
rect(50, 50, 100, 200);
setStrokeWidth(1);
setStrokeColor("black");
rect(50, 50, 100, 200);
Example: overlapping rectangles
Shows the difference between drawing a rectangle filled with white pixels and a rectangle filled with transparent pixels.
// Shows the difference between drawing a rectangle filled with white pixels and a rectangle filled with transparent pixels.
createCanvas("canvas1");
setFillColor("white");
rect(50, 50, 100, 200);
rect(50, 100, 100, 200);
setStrokeColor("red");
setFillColor("transparent");
rect(200, 50, 100, 200);
rect(200, 100, 100, 200);
Example: part of a rectangle
Draw a rectangle larger than the canvas so that only the portion inside the canvas is visible.
// Draw a rectangle larger than the canvas so that only the portion inside the canvas is visible.
createCanvas("canvas1", 120, 50);
setPosition("canvas1", 100, 260);
setStrokeWidth(15);
rect(60, -15, 50, 50);
Syntax
rect(x, y, width, height)
Parameters
| Name | Type | Required? | Description |
|---|---|---|---|
| x | number | The x position in pixels of the upper left corner of the rectangle. | |
| y | number | The y position in pixels of the upper left corner of the rectangle. | |
| width | number | The horizontal width in pixels of the rectangle. | |
| height | number | The vertical height in pixels of the rectangle. |
Returns
Tips
- A canvas element must exist before a rectangle can be drawn. Create a canvas element in Design mode first, or call
createCanvas()before calling rect(). - If you're having trouble getting a rectangle to show up, make sure a canvas is created first and that where you're trying to draw the rectangle fits within the coordinates of the canvas.
- Change the width of the line, color of the line, and fill color used to draw all subsequent rectangles on this canvas using setStrokeWidth, setStrokeColor. and setFillColor.
- When drawing thick lines, the width and length of the rectangle is relative to the center of the perimeter line. The outside perimeter of the rectangle will be one half the stroke width larger all around.
Found a bug in the documentation? Let us know at support@code.org.
