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

Processing for Android
1

So, I pretty much want to make this exact app, just in AR and with better brushes: https://play.google.com/store/apps/details?id=com.TNInteractive.GraffitiPaint&hl=en

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.

2

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:

https://editor.p5js.org/tom.smith/sketches/jq64fiJV-

https://editor.p5js.org/tom.smith/sketches/jq64fiJV-

3 
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");
  shader.set("mult",2.1);
  shader.set("range",1.0);
  //shader.set("v",v);
  noStroke();
  canvas = createGraphics(width,height,P3D);
};

void draw() {
  
  canvas.beginDraw();
  canvas.background(0);
  canvas.translate(width / 2, height / 2);
  canvas.rotateX(map(mouseY, 0, height, -PI, PI));
  canvas.rotateY(map(mouseX, 0, width, -PI, PI));
  canvas.rotateZ(PI/6);
  canvas.beginShape();
  //canvas.texture(img);
  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);
  canvas.shader(shader);
  canvas.endShape();
  canvas.endDraw();
  image(canvas,0,0);
  
};
4

for real 3D (I think with keyboard)

see Some Graphical Editors - #3 by Chrisir

see 3d drawing with mouse - #7 by Chrisir