Can't get Canvas element to register strokes

Premiere Pro
1 
function buildImageContent(note) {
  const markupImageContainer = document.createElement("div");
  markupImageContainer.className = "note-image-wrap";
  const canvas = document.createElement("canvas");
  canvas.className = "note-canvas";
  const ctx = canvas.getContext("2d");

  const img = document.createElement("img");
  img.src = `file://${note.dataUrl}`;
  img.crossOrigin = "anonymous";
  img.className = "note-image";
  img.onload = () => ctx.drawImage(img, 0, 0);

  markupImageContainer.appendChild(img);
  markupImageContainer.appendChild(canvas);

  let drawing = false;

  function getPos(e) {
    const r = canvas.getBoundingClientRect();
    const src = e.touches ? e.touches[0] : e;

    return { x: src.clientX - r.left, y: src.clientY - r.top };
  }
  function startDraw(e) {
    e.preventDefault();
    drawing = true;
    const { x, y } = getPos(e);
    ctx.beginPath();
    ctx.moveTo(x, y);
  }
  function moveDraw(e) {
    e.preventDefault();
    if (!drawing) return;
    const { x, y } = getPos(e);
    ctx.strokeStyle = "red";
    ctx.lineWidth = 2;
    ctx.lineCap = ctx.lineJoin = "round";
    ctx.lineTo(x, y);
    ctx.stroke();
  }
  function stopDraw(e) {
    e.preventDefault();
    drawing = false;
  }

  canvas.addEventListener("mousedown", startDraw);
  canvas.addEventListener("mousemove", moveDraw);
  canvas.addEventListener("mouseup", stopDraw);
  canvas.addEventListener("mouseleave", stopDraw);

  return markupImageContainer;
}

I’m trying to paste an image into a div, and put a canvas element on top of it that will allow you to draw with red lines on top of the image. I checked all the eventListeners, and they seem to be working fine. But no lines are being drawn.

is canvas not supported in premiere pro UXP yet?

2

For now, it’s a UXP limitation.