Next

Color functions

In order to apply color to p5.js elements we use the fill () function.

We can write colors in any of RGB, RGBA, Hex and supported named color strings.

In order to define the color of the border of p5.js elements we use the stroke() function. 

We can increase or decrease the border weight by using the strokeWeight() function. 

If we don't want our elements to be filled, we use the noFill()function, whereas if we don't want them to have border we use the noStroke()

Example 

Here is an example where all of the above functions are used:

function setup() {
  // create canvas
  createCanvas(800,500);
  }
function draw () {
  // set background color
  background('#B1CBBB');
  //use the fill function to color the triangle
  fill('#EEA29A');
  // use the noStroke function to remove border
  noStroke();
  triangle(width/2,height/2,500,400,300,400);
  // use the noFill function to remove the fill of our element
  noFill();
  // use the stroke to change the color of the border
  stroke('#D64161');
  // use the strokeWeight to change the border weight
  strokeWeight(5);
  triangle(width/2,height/2,500,100,300,100);
}

Result of the above code:

Next