loss of sprite quality on mobile

[yanballas]

Hi guys. I'm using matter.js for some small animation. Depending on the width of the screen, I render four different options for filling the canvas from prepared objects with a fixed width and height of the elements.

const createElement = (x, y, width, height, img) => { const el = Bodies.rectangle(x, y, width, height, { render: { sprite: { texture: img, }, }, }); Composite.add(engine.world, el); };

...some code...

  const respawn = (width) => {
    if (width >= 1200) {
      elementsRespawn(desktopElements);
    } else if (width >= 700) {
      elementsRespawn(tabletElements);
    } else if (width >= 500) {
      elementsRespawn(mobileXlElements);
    } else if (width >= 320) {
      elementsRespawn(mobileSmElements);
    }
  };

I have the following problem. On desktop everything is fine, but on mobile all the images are blurry. It's as if they or canvas have scale.
What do I need to work with?
Thank you.

[yanballas]

I found that this problem goes away when using pixelRatio auto in render, but then I actually lose the limitations of the canvas and just zoom it in