fill with an image in processing.js

Question

I'm working with some canvas and processing.js but i cant figure out how to fill an arc/ellipse etc with an image.

Using JavaScript usually i do something like this:

ctx.save();
ctx.beginPath();
ctx.arc(x, y, size, 0, Math.PI * 2, true);
ctx.closePath();
ctx.clip();
ctx.drawImage(thumbImg, 0, 0, 400, 400);

ctx.beginPath();
ctx.arc(x, y, size, Math.PI * 2, true);
ctx.clip();
ctx.closePath();
ctx.restore();

and the game is done, but how can i do it with processing.js?

I've tried those options but seems that I'm doing something wrong:

b = loadImage("nicola.png");
fill(b)
background(b);
ellipse(x, y, size, size);

any idea?

Answer 1

I believe that what you are trying to get at is called image masking an example of masking

Description:

Masks part of an image from displaying by loading another image and using it as an alpha channel. This mask image should only contain grayscale data, but only the blue color channel is used. The mask image needs to be the same size as the image to which it is applied.

In addition to using a mask image, an integer array containing the alpha channel data can be specified directly. This method is useful for creating dynamically generated alpha masks. This array must be of the same length as the target image's pixels array and should contain only grayscale data of values between 0-255.

---

Example:

var g2;
var setup = function(){
  createCanvas(200,200);
  background(0, 0, 0, 0);
  smooth();

  fill(255, 255, 255);
  ellipse(100, 100, 200, 200);

  var g1 = get(0, 0, 200, 200);
  background(0, 0, 0, 0);
  noStroke();
  for(let i = 0; i < 360; i++){
    fill(sin(radians(i))*255, i, 200);
    rect(0, i, 200, 1);
  }
  g2 = get(0, 0, 200, 200);
  g2.mask(g1);
}

var draw = function(){
    background(255, 255, 255);
    image(g2, 0, 0);
};

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

an image of what the above code returns: