# Should width and height of canvas be double?

**URL:** <https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451>\
**Category:** p5.js\
**Created:** [April 19, 2019, 7:49am UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451 "2019-04-19T07:49:24Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anthonygalea](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anthonygalea/32/3852_2.png) [@anthonygalea](https://discourse.processing.org/u/anthonygalea)\
**Post date:** [April 19, 2019, 7:49am UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451/1 "2019-04-19T07:49:24Z")

</div>

I’m using a Macbook pro (with a hidpi display) and just noticed that the `width` and `height` properties of the `canvas` element are double the `width` and `height` parameters passed to the `createCanvas` call. Screenshot attached. Guess [this](https://github.com/processing/p5.js/blob/master/src/core/p5.Renderer.js#L103) is where the doubling occurs. I would just like to understand if this is a bug or if it is intentional?

 ![Screenshot](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0fa619c7252b514795ec20f7ef042080826aab51.png)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 19, 2019, 9:17am UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451/2 "2019-04-19T09:17:20Z")

</div>

can you try here and play with the browser window size?  
[https://editor.p5js.org/kll/sketches/hXy\_Ij1gB](https://editor.p5js.org/kll/sketches/hXy_Ij1gB)

---

<div class="post-metadata">

**Author:** ![anthonygalea](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/anthonygalea/32/3852_2.png) [@anthonygalea](https://discourse.processing.org/u/anthonygalea)\
**Post date:** [April 19, 2019, 9:23am UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451/3 "2019-04-19T09:23:04Z")

</div>

console output when pressing `i` after resizing window:

```auto
windowWidth 826 windowHeight 793 width 826 height 793 
windowWidth 622 windowHeight 592 width 826 height 793 
windowWidth 359 windowHeight 385 width 826 height 793

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [April 19, 2019, 9:35am UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451/4 "2019-04-19T09:35:48Z")

</div>

on RASPBIAN linux CHROME see

```auto
<canvas id="defaultCanvas0" class="p5Canvas" width="400" height="400" style="width: 400px; height: 400px;"></canvas>

```

so it might be about your high density screen

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [April 21, 2019, 3:20pm UTC](https://discourse.processing.org/t/should-width-and-height-of-canvas-be-double/10451/5 "2019-04-21T15:20:01Z")

</div>

For high-density displays you can set or get the pixelDensity:

[https://p5js.org/reference/#/p5/pixelDensity](https://p5js.org/reference/#/p5/pixelDensity)