# Issues with pixel resolutions using image() on a phone?

**URL:** https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887
**Category:** p5.js
**Created:** [May 14, 2020, 11:33pm UTC](https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887 "2020-05-14T23:33:06Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![seang42](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@seang42](https://discourse.processing.org/u/seang42)
#### Post date: [May 14, 2020, 11:33pm UTC](https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887/1 "2020-05-14T23:33:06Z")

</div>

Hi,

I’m attempting to use p5js to place a bunch of images in a grid like fashion on a canvas and have the user save the sketch to use as a background for their phone.

I get the users phone resolution using displayWidth, displayHeight and set it as my canvas.

I load the image into an img variable using loadImage() and then call the image function to draw my image onto the canvas.

However when I call the image function to draw the image and resize it for example  
image(img, 0, 0, 300, 300) and download it to my phone, the canvas resolution says what’s expected - displayWidth, displayHeight, but the interesting thing is that the image enhanced at least 3x than what I specified in the image function.

I assume this has to do with pixelDensity so I tried calling the function before I call the image() but it didn’t work.

Can anyone explain to me why this happens?

Here is my code:

```auto
var img; 

function preload() {

	str = 'https://i2.cdn.turner.com/money/dam/assets/161109153420-my-first-job-sean-combs-640x640.jpg';

	img = loadImage(str);
}

function setup() {
	cnv = createCanvas(displayWidth, displayHeight);
	background(100);
}

function draw() {
//	pixelDensity(1);
	image(img, 0, 0, 200, 200);
	saveCanvas('background', 'jpg')
}

```

Thank you!

---

<div class="post-metadata">

### Author: ![Sven](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sven/32/8293_2.png) [@Sven](https://discourse.processing.org/u/Sven)
#### Post date: [May 16, 2020, 12:46pm UTC](https://discourse.processing.org/t/issues-with-pixel-resolutions-using-image-on-a-phone/20887/2 "2020-05-16T12:46:33Z")

</div>

Hello @seang42,

It sounds to me like you already have this figured out, it happens because of the pixel scaling going on behind the scenes. The p5.js functions (like `image`) adjust for that.

```javascript
pixelDensity(1);
image(img, 0, 0, 200, 200);

```

The above results in an image 200×200 pixels to be drawn. While the example below will result in a 600×600 pixel image.

```javascript
pixelDensity(3);
image(img, 0, 0, 200, 200);

```

If you have a device with a pixel density of 3 and want to put 200×200 **physical pixels** on that canvas, you have to divide all your dimensions by 3. Or use `scale()` and `displayDensity()` to adjust all dimensions for you:

```javascript
scale(1 / displayDensity());
image(img, 0, 0, 200, 200);

```