setStrokeColor

Category:Canvas

setStrokeColor(color)

Category: Canvas

Sets the stroke color for the active canvas.

The stroke color controls, for the active canvas, the color of lines drawn with line, rect, and circle. For circles and rectangles, the stroke color applies to the outline of the shape. The interior color of circles and rectangles is set using setFillColor().

The color parameter must be a string enclosed in quotes, and can take one of four forms. It can be:

  • the name of the color
  • the hex value of the color (preceded by a #)
  • the rgb value of the color
  • the rgba value of the color (last value specifies the alpha channel for transparency)

The default stroke color is black.

Examples

// Draw two parallel lines in different colors.
createCanvas("canvas1");
line(120, 50, 200, 50);
setStrokeColor("red");
line(120, 75, 200, 75);

Example: Stick Figure Draws a purple stick figure standing on green grass.

// Draws a purple stick figure standing on green grass.
createCanvas("canvas1", 320, 480);
setStrokeWidth(3);
setStrokeColor("purple");
circle(160, 60, 40);
line(160, 100, 160, 260);
line(160, 260, 220, 420);
line(160, 260, 100, 420);
line(40, 130, 280, 130);
setStrokeColor("green");
setStrokeWidth(10);
line(0, 425, 320, 425);

Example: 4 Ways Demonstrate all 4 ways to specify the color parameter.

// Demonstrate all four ways to specify the color parameter.
createCanvas("canvas1");
// Sets the color using the name of a color in a string.
setStrokeColor("chartreuse");
circle(50, 50, 40);

// Sets the color using the hex value of a color in a string.
setStrokeColor("#7fff00");
circle(100, 50, 40);

// Sets the color using the rgb value of a color in a string.
setStrokeColor("rgb(127, 255, 0)");
circle(50, 100, 40);

// Sets the color using a rgba value of a color in a string.
// The last value is the amount of transparency, a percentage between 0.0 and 1.0 
setStrokeColor("rgba(127, 255, 0, 0.5)");
circle(100, 100, 40);

Syntax

setStrokeColor(color)

Parameters

Name Type Required? Description
color String Yes The color of the pen used to draw lines, or outline circles and rectangles.

Returns

No return value. Outputs to the display only.

Tips

  • A canvas element must be created before the stroke color can be changed. Create a canvas element in Design mode first, or call createCanvas() before calling setStrokeColor.
  • setStrokeColor only affects the active canvas. If there is more than one canvas, each one can have a different stroke color.
  • The color "transparent" will not draw any lines.
  • Recall Unit 1 lessons about hex and rgb color values and see HTML named colors for a complete list of all available colors.

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