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

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 :)



Sign In or Register to comment.