p5.js中如何在createImg创建的GIF动画上方绘图？

我编写的代码大致如下：

function setup(){
   createCanvas(400,400);
   pg = createGraphics(400,400);
   gif_createImg = createImg("my.gif");
    
}

function draw(){
    pg.clear();
    show(x,y,d);
    pg.strokeWeight(2*d);
    pg.point(x,y);
    image(pg,0,0);
}

function show(x,y,d) {
    gif_createImg.size(d,d);
    gif_createImg.position(x,y);
}

为什么绘制的点会出现在GIF下方？我明明在GIF之后调用了绘图代码。如何让点显示在GIF上方？我尝试使用createGraphics但没有效果（这是我第一次使用该功能）。我知道createImg创建的Element与point、image这类绘图元素表现不同（比如不受transform()影响等），但我找不到处理这类Element的相关说明或参考资料。

原因 #

createImg()创建的是DOM元素，它独立于Processing的canvas画布存在，默认会渲染在canvas的上层。不管你在draw()里怎么调用canvas的绘图逻辑（包括使用createGraphics绘制的内容），DOM元素都会直接盖在canvas上面，所以你看到点在GIF下方。

解决方法 #

方法一：将GIF绘制到Canvas中（推荐） #

放弃使用DOM元素的createImg()，改用loadImage()加载GIF，然后像绘制普通图像一样把它画到canvas（或createGraphics创建的画布）上，这样所有内容都在同一个绘制层级里，顺序完全由代码控制。

示例代码：

let gifImg;

function setup(){
  createCanvas(400,400);
  pg = createGraphics(400,400);
  // 用loadImage加载GIF，替代createImg
  gifImg = loadImage("my.gif");
}

function draw(){
  pg.clear();
  // 先在pg画布上绘制GIF
  pg.image(gifImg, x, y, d, d);
  // 再绘制点，此时点会在GIF上方
  pg.strokeWeight(2*d);
  pg.point(x,y);
  // 将pg画布内容绘制到主画布
  image(pg,0,0);
}

方法二：调整DOM元素层级（适合必须用createImg的场景） #

如果一定要保留createImg()创建的DOM元素，可以通过CSS的z-index属性调整层级，让canvas显示在GIF上方。

示例代码：

function setup(){
  createCanvas(400,400);
  pg = createGraphics(400,400);
  gif_createImg = createImg("my.gif");
  // 给GIF元素设置更低的层级，让它在canvas下方
  gif_createImg.style('z-index', '-1');
}

function draw(){
  pg.clear();
  // 先绘制点到pg画布
  pg.strokeWeight(2*d);
  pg.point(x,y);
  image(pg,0,0);
  // 再调整GIF的位置和大小
  show(x,y,d);
}

function show(x,y,d) {
  gif_createImg.size(d,d);
  gif_createImg.position(x,y);
}

注意：DOM元素的坐标是相对于页面的，而canvas内部坐标是自身画布的坐标，使用这种方法时要确保两者的坐标对应准确。

内容的提问来源于stack exchange，提问作者Kertaix