Giving background images to shapes (ie. rect(),ellipse()..)

Thebndjames

Hello p5.js forums! :) So i have been wondering if there was a built in function that gives a background image to a certain shape, like, let's say i want to draw a 100x100 rect and give it a fill of an image. normally with colors, we use the following : fill(255); rect(0,0,100,100); The rectangle will appear to be white, well, i was hoping for a function like the following : fillImg("url: ('/assets/prog.jpg')"); rect(0,0,100,100); Now, i'm fully aware of the image(); and the loadImage(); functions, but those are not as functional as using a background image for say a triangle(); Now in normal javascript, you can use fillStyle to give a shape a background image, so i think we should be able to construct a function to do so in p5.js var shape=document.getElementById("myCanvas").getContext("2d"); var img=document.getElementById("img"); var bg=shape.createPattern(img,"no-repeat"); shape.rect(0,0,150,100); shape.fillStyle=bg; someting like shape.fillStyle would be very helpful in p5.js :) I hope my idea was clear enough for you understanding :)

TfGuy44

Use texture().

Thebndjames

Use texture().

That is only a partial solution, by that i mean it only works with WebGL, and is very buggy with 2d structures i would rather have a much simpler solution that works for all browser.

jeremydouglass

@Thebndjames -

let's say i want to draw a 100x100 rect and give it a fill of an image

If I'm understanding right (not a p5.js expert) you want to use p5.Image.mask().

• https://p5js.org/reference/#/p5.Image/mask

Instead, draw your rect on a p5.Image, then apply it as a mask to your content image. I'm only familiar with this solution in Processing, but I believe it should work the same in p5....

In Processing, see for example:

• https://forum.processing.org/two/discussion/comment/77997/#Comment_77997