Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

p5.js Image mask() Method

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

The mask() method of p5.Image in p5.js library is used to apply the given mask to the image. This is done by using the alpha channel of the mask image as the alpha channel of this image.


mask( srcImage )

Parameters: This function accepts a single parameter as mentioned above and described below.

  • srcImage: It is a p5.Image that would be used as the mask to be applied.

The following libraries are included in the “head” section of the HTML page while implementing the following example.

<script src=”p5.Image.js”></script>
<script src=”p5.min.js”></script>

Example: The example below illustrates the mask() method in p5.js library.


function preload() {
    img_orig =
    img_mask =
function setup() {
    createCanvas(500, 500);
    btnBlur =
      createButton("Add a mask to the image");
    btnBlur.position(30, 420);
function draw() {
    text("Click on the button to add " +
         "a mask to the image", 20, 20);
    text('Image:', 20, 60);
    image(img_orig, 20, 80, 200, 100);
    text("Mask:", 20, 220);
    image(img_mask, 20, 220, 180, 180);
function applyMask()
    // Apply the given mask to the image


Online editor:
Environment Setup:

My Personal Notes arrow_drop_up
Last Updated : 23 Sep, 2020
Like Article
Save Article
Similar Reads
Related Tutorials