I’m having issues understanding how the P5.js instance mode works. The syntax of creating the object seems so different from anything else I’ve seen.

Currently I’m working on a big project where I’m drawing the shoe model in canvas and using some functions to divide them into segments. Those segments are clickable in order to change the images depending on which and how many colors have been chosen. So, let say if we have selected 3 colors then my helper function will generate new image from those colors (or basically will change the colors of current image into new colors).

I’m having a problem with my code where I am using P5-wrapper/react to show the 2D model I created. However, whenever React states changes it re-creates the canvas again and again it gives warning that WARNING: Too many active WebGL contexts. Oldest context will be lost..