setStrokeWidth(width)
Category:Canvas
The stroke width controls, for the active canvas, the thickness of lines drawn with line(), rect(), and circle(). The stroke width controls the thickness of lines drawn with The width is measured in pixels. As the stroke width increases, the lines drawn get thicker equally on both sides. Any lines or shapes that have already been drawn are not affected.
Examples
Example: parallel lines
// Draw two parallel lines that start and end at the same x coordinates, but have different stroke widths. Because the lines have rounded ends, the thicker line is in fact longer than the thinner line.
createCanvas("canvas1");
line(120, 50, 200, 50);
setStrokeWidth(20);
line(120, 75, 200, 75);
Example: down the middle
Draw two lines with the same start and end point, but with different stroke widths. Thicker strokes expand the line equally on both sides.
// Draw two lines with the same start and end point, but with different stroke widths. Thicker strokes expand the line equally on both sides.
createCanvas("canvas1");
setStrokeColor("lightblue");
setStrokeWidth(20);
line(0, 50, 320, 50);
setStrokeColor("black");
setStrokeWidth(1);
line(0, 50, 320, 50);
Syntax
setStrokeWidth(width)
Parameters
| Name | Type | Required? | Description |
|---|---|---|---|
| width | number | The width of the line in pixels to draw lines, circles, and rectangles. |
Returns
No return value. Outputs to the display only.
Tips
- setStrokeWidth only affects the active canvas. If there is more than one canvas, each one can have a different stroke width.
- When a new canvas is created, its stroke width will be the default value of 1 pixel.
- A canvas element must be created before the stroke width can be changed. Create a canvas element in Design mode first, or call createCanvas() before calling setStrokeWidth().
Found a bug in the documentation? Let us know at support@code.org.
