# Problem with x-coordinate of the subsection of the source image in image() on safari. P5JS

**URL:** <https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676>\
**Category:** p5.js\
**Created:** [November 22, 2021, 10:48pm UTC](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676 "2021-11-22T22:48:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kalwas](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@kalwas](https://discourse.processing.org/u/kalwas)\
**Post date:** [November 22, 2021, 10:48pm UTC](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676/1 "2021-11-22T22:48:33Z")

</div>

Hi, I have a problem with my work. On all browsers it works correctly only not on safari. I noticed that the error occurs (only on safari) if sx in image() in line 66 is different than 0.

Does anyone have an idea why this is happening?

[https://editor.p5js.org/kalwas/sketches/lf5wAAImI](https://editor.p5js.org/kalwas/sketches/lf5wAAImI)

Thanks a lot in advance

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [November 24, 2021, 9:55am UTC](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676/2 "2021-11-24T09:55:16Z")

</div>

Oof, that is some surprisingly different behavior. Apparently Safari is not able to draw ranges of an image that are outside of the bounds of the image. So when you use an `sx` that is negative, or an `sx` that is positive such that `sx + sw` is greater than the width of the source image, it blows up and draws nothing 😔. As a work around here is some alternate image drawing code that ensures the source range is always within the range of the source image:

```auto
      if (sx < 0) {
        // Since the source is left of zero we want to take this content and
        // shift it to the right, we do this by using a source x of 0 and
        // increasing the destination x by -sx
        image(
          pg,
          dx - sx,
          dy,
          dw + sx,
          dh,
          0,
          sy,
          sw + sx,
          sh
        );
      } else {
        // when sx is positive we just need to make sure the source width
        // isn't too big
        image(
          pg,
          dx,
          dy,
          dw - sx,
          dh,
          sx,
          sy,
          sw - sx,
          sh
        );
      }

```

Note: this works fine with only 1 horizontal tile. it would need more work with multiple.

---

<div class="post-metadata">

**Author:** ![kalwas](https://avatars.discourse-cdn.com/v4/letter/k/e68b1a/32.png) [@kalwas](https://discourse.processing.org/u/kalwas)\
**Post date:** [November 24, 2021, 5:23pm UTC](https://discourse.processing.org/t/problem-with-x-coordinate-of-the-subsection-of-the-source-image-in-image-on-safari-p5js/33676/3 "2021-11-24T17:23:48Z")

</div>

> [@KumuPaul](#):
>
> ```auto
> if (sx < 0) {
> // Since the source is left of zero we want to take this content and
> // shift it to the right, we do this by using a source x of 0 and
> // increasing the destination x by -sx
> image(
> pg,
> dx - sx,
> dy,
> dw + sx,
> dh,
> 0,
> sy,
> sw + sx,
> sh
> );
> } else {
> // when sx is positive we just need to make sure the source width
> // isn't too big
> image(
> pg,
> dx,
> dy,
> dw - sx,
> dh,
> sx,
> sy,
> sw - sx,
> sh
> );
> }
> 
> ```

Thanks a lot for your help. I’ve been thinking about this a lot