setStrokeWidth

Category:Canvas

setStrokeWidth(width)

Category: Canvas

Sets the line width for the active 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


// 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 Yes 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 documentation@code.org

Found a bug in the documentation? Let us know at documentation@code.org