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

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);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>

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

Can you post a screen shot of what you are seeing? For me the shadow appears below and to the right of the gradient rect:

Note that the brownish rectangle is the shadow (from drawingContext.shadowColor = color(111, 0, 0)) while the dark grey transparent (shadow-looking) rectangle is the gradientRect.