How do I use ChartJS Annotations plugin to show patterns instead of colors as a box

I understand that I can use type = label to show image in annotation as describe below

https://www.chartjs.org/chartjs-plugin-annotation/latest/samples/label/image.html

But I'm wondering if it's possible how to make images behave like the colors

Annotations on ChartJs shows on top of the plots when opaque is one

Below is the code I tried ,

image: {
   type: "label",
   drawTime: "beforeDraw",
   yMin: 22,
   yMax: 40,
   content: (context, opts) => {
      const img = new Image();
      img.src = "https://www.onlygfx.com/wp-content/uploads/2021/03/geometric-triangle-retro-pattern-1.png";
      return img;
   },
},

It works for the whole width but it doesn't show to the yMin and yMax value. Here's the output

UPDATE: The idea is when I put yMin = 20 and yMax=40, it will be covered with the pattern

enter image description here

Additional photo

enter image description here

Just worked on what @kikon did. I hope this helps. I calculated the disctance between yAxes ticks

`https://jsfiddle.net/um2hpac6`