How to put an interactable 2D canvas in 3D?

So, I pretty much want to make this exact app, just in AR and with better brushes:

One way to do it that I came up with would be to open a 2D sketch in which you draw in an interactive canvas/plane inside an other 3D sketch, but I have no idea how to do it.

Maybe there’s a way to put a 2D processing sketch into some other AR program that would let the player interact with it on a virtual screen, but I haven’t yet found anything like this so far.

I just want to find a way to paint like in 2D on a plane in 3D, but idk how. Please help me lol.

Absolutely no idea, but I wondered if one could drop a live p5js canvas into A-Frame, and I know I’m probably not doing this right (someone please duplicate it and do it properly), but here:

PShader shader;
PGraphics canvas;
PImage img;
float []v = {0.1,0.2,0.3,0.4,0.5,0.6,0.7,0.8,0.9,1.0};
void setup() {
  size(640, 360, P3D);
  img = loadImage("b1.jpg");
  shader = loadShader("mean.glsl");
  canvas = createGraphics(width,height,P3D);

void draw() {
  canvas.translate(width / 2, height / 2);
  canvas.rotateX(map(mouseY, 0, height, -PI, PI));
  canvas.rotateY(map(mouseX, 0, width, -PI, PI));
  canvas.vertex(-100, -100, 0, 0, 0);
  canvas.vertex(100, -100, 0, img.width, 0);
  canvas.vertex(100, 100, 0, img.width, img.height);
  canvas.vertex(-100, 100, 0, 0, img.height);

for real 3D (I think with keyboard)

see Some Graphical Editors - #3 by Chrisir

see 3d drawing with mouse - #7 by Chrisir