circle(x, y, radius)
You can draw many things with the basic canvas drawing functions of circle, line and rect. For circle(), the x and y coordinates specify the center of the circle, relative to the top-left corner of the canvas (x:0 y:0). The radius is measured in pixels. Circles 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: One Circle
// Draw a circle centered on the screen with the default stroke color, width, fill color.
createCanvas("canvas1");
circle(160, 240, 100);
Example: Red Line
Change the color of the circle outline.
// Change the color of the circle outline.
createCanvas("canvas1");
setStrokeColor("red");
circle(160, 240, 100);
Example: Red Dot
Change the color of the circle fill (note the outline is still default black).
// Change the color of the circle fill (note the outline is still default black).
createCanvas("canvas1");
setFillColor("red");
circle(160, 240, 100);
Example: Thick Outline
Change the thickness of the circle outline.
// Change the thickness of the circle outline.
createCanvas("canvas1");
setStrokeWidth(20);
circle(160, 240, 100);
Example: Two Circles
Draw two circles at the same location and with the same radius but with different stroke widths.
// Draw two circles at the same location and with the same radius but with different stroke widths.
createCanvas("canvas1");
setStrokeWidth(40);
setStrokeColor("lightblue");
circle(160, 240, 100);
setStrokeWidth(1);
setStrokeColor("black");
circle(160, 240, 100);
Example: Overlapping Circles
Shows the difference between drawing a circle filled with white pixels and a circle filled with transparent pixels.
createCanvas("canvas1");
setFillColor("white");
circle(100, 100, 50);
circle(100, 150, 50);
setStrokeColor("red");
setFillColor("transparent");
circle(200, 100, 50);
circle(200, 150, 50);
Example: Part of a Circle
Draw a circle larger than the canvas so that only the portion inside the canvas is visible.
// Draw a circle larger than the canvas so that only the portion inside the canvas is visible.
createCanvas("mouth", 120, 50);
setActiveCanvas("mouth");
setPosition("mouth", 100, 260);
setStrokeWidth(15);
circle(60, -15, 50);
Syntax
circle(x, y, radius)
Parameters
| Name | Type | Required? | Description |
|---|---|---|---|
| x | number | The x position in pixels of the center of the circle relative to the upper left corner of the active canvas. | |
| y | number | The y position in pixels of the center of the circle relative to the upper left corner of the active canvas. | |
| radius | number | The radius of the circle, in pixels. |
Returns
Tips
- A canvas element must be created before a circle can be drawn. Create a canvas element in Design mode first, or call createCanvas() before calling circle.
- If you're having trouble getting a circle to show up, make sure that you're trying to draw the circle within the bounds of the active canvas.
- Change the width of the line, color of the line, and fill color used to draw all subsequent circles using on this canvas setStrokeWidth, setStrokeColor. and setFillColor.
- When drawing thick lines, the radius of the circle defines the center of the perimeter line. The outside radius of the circle will be the specified radius plus half the stroke width.
Found a bug in the documentation? Let us know at support@code.org.
