Why does the shadow appear above the image in this p5.js code?

[WantenMN]

Topic

I'm trying to draw a shadow effect below an image using p5.js, but the shadow is appearing above the image instead. Here's my code:

function setup() {
  createCanvas(windowWidth, windowHeight);
}

function draw() {
  background(255);
  drawingContext.shadowOffsetX = 10;
  drawingContext.shadowOffsetY = 10;
  drawingContext.shadowBlur = 2;
  drawingContext.shadowColor = color(111, 0, 0);

  const g = createGraphics(windowWidth, windowHeight);
  addGradientRect(g, 10, 10, 40, 40, "#000", "#555");
  image(g, 0, 0);
}

function addGradientRect(graphics, x, y, width, height, from, to) {
  const p = graphics;
  p.noFill();
  for (let ty = 0; ty < height; ty++) {
    const inter = p.map(ty, 0, height, 0, 1);
    const c = p.lerpColor(p.color(from), p.color(to), inter);
    p.stroke(c);
    p.line(x, y + ty, x + width, y + ty);
  }
}

I'm setting the shadowOffsetX and shadowOffsetY properties to positive values, which should place the shadow to the right and below the image, respectively. However, the shadow appears above the image instead.

Can someone explain why this is happening and how I can fix it to make the shadow appear below the image?

Please let me know if you'd like me to modify or expand the summary further.

Online editor: https://editor.p5js.org/

[welcome[bot]]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

When I pasted your code into the web editor, it appears below and to the right as expected. Is this also what you're seeing?

[WantenMN]

@davepagurek Thank you for your reminder. The shadow indeed appears below the image. Due to the lines I drew, each line generates a shadow. There seems to be a 'conflict' between the shadows of the lines in the front and those in the back, causing the shadows to appear as if they are on top. I retested it using rect and confirmed that the shadow does indeed appear beneath the image. Thank you.