# How does p5, or JS handle decimal drawing on canvas?

**URL:** <https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196>\
**Category:** p5.js\
**Created:** [March 11, 2019, 4:34pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196 "2019-03-11T16:34:09Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Milky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milky/32/4334_2.png) [@Milky](https://discourse.processing.org/u/Milky)\
**Post date:** [March 11, 2019, 4:34pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/1 "2019-03-11T16:34:09Z")

</div>

I am very confused about how this works. I always thought about pixels as whole numbers, and I was writing my game having this constantly in mind. I thought, okay this has to work with whole numbers, I can’t have decimals because it will just round it when I draw things, so it will not be accurate. This wrecked my brain. However, then I thought okay let’s just forget pixels and think as if I could draw things with decimal accuracy, just to see what it would look like on the canvas, and what do you know, it worked exactly how I wanted it to work. I am very curious if anyone knows how this is possible?

---

<div class="post-metadata">

**Author:** ![Kevin](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kevin/32/2297_2.png) [@Kevin](https://discourse.processing.org/u/Kevin)\
**Post date:** [March 11, 2019, 9:42pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/2 "2019-03-11T21:42:21Z")

</div>

I’m pretty sure it just truncates the value, so e.g. `42.375` would just be treated as `42` when it’s drawn to the screen.

You could test this yourself by creating a sketch that draws two points: one at `50, 50` and another at `50.1, 50.1`, and then zooming in to see if there’s any difference.

---

<div class="post-metadata">

**Author:** ![Milky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milky/32/4334_2.png) [@Milky](https://discourse.processing.org/u/Milky)\
**Post date:** [March 12, 2019, 1:07am UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/4 "2019-03-12T01:07:20Z")

</div>

Thats what I assume as well, yes. But the way my code works at the moment is like this:  
current x,y position is incremented by a very small number, calculated using trigonometry. So, I want the next x,y position to be diagonally always at 1.5 pixel distance away from the old x,y position, so using trigonometry I find what the change in x and y should be, which usually varies around 1.0-1.2. And my code works perfect, it totally makes a distinction in direction depending on a radius i choose. This makes no sense to me because I would say 1.0-1.2 always rounds down to 1.0, so there shouldnt be a diagonal movement (besides the one diagonal which is, x+1 and y+1) but there is every diagonal you would want… how is this possible?

---

<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:** [March 12, 2019, 4:09am UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/5 "2019-03-12T04:09:02Z")

</div>

possibly the  
[https://processing.org/reference/pixelDensity\_.html](https://processing.org/reference/pixelDensity_.html)  
and the  
[https://processing.org/reference/smooth\_.html](https://processing.org/reference/smooth_.html)  
not make it a pure INT thing we would think of first.  
for p5.js must be something similar??

---

<div class="post-metadata">

**Author:** ![Milky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milky/32/4334_2.png) [@Milky](https://discourse.processing.org/u/Milky)\
**Post date:** [March 12, 2019, 8:56am UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/6 "2019-03-12T08:56:26Z")

</div>

that’s interesting. What does changing the pixelDensity do exactly? I dont quite understand, as it just says “makes it possible for Processing to render using all of the pixels on high resolutions screens”. I mean, what is it by default? Do we not have pixel-control over the screen? is it an illusion?

---

<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:** [March 12, 2019, 9:07am UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/7 "2019-03-12T09:07:59Z")

</div>

i not suggested changing,  
check with

```auto
displayDensity()
//and
pixelDensity()

```

my idea was just to say that if you think you control 1 pix,  
it might be with pixelDensity = 2  
actually 4 screen pixel  
what you can check if they have one or 4 different colors.  
[https://p5js.org/reference/#/p5/pixels](https://p5js.org/reference/#/p5/pixels)  
( but i am not sure if i have the right understanding )

---

<div class="post-metadata">

**Author:** ![Milky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milky/32/4334_2.png) [@Milky](https://discourse.processing.org/u/Milky)\
**Post date:** [March 12, 2019, 12:48pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/8 "2019-03-12T12:48:29Z")

</div>

both display and pixel density are 1, checked 😄

---

<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:** [March 12, 2019, 12:50pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/9 "2019-03-12T12:50:17Z")

</div>

can you show your problem code in  
[https://editor.p5js.org/](https://editor.p5js.org/)

[https://editor.p5js.org/kll/sketches/hVpA0TjGL](https://editor.p5js.org/kll/sketches/hVpA0TjGL)  
something like i see that line width is repeatedly changing?

by the way pls test strokeWeight(0.5)  
how that fits into any pixel thinking?

---

<div class="post-metadata">

**Author:** ![Milky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/milky/32/4334_2.png) [@Milky](https://discourse.processing.org/u/Milky)\
**Post date:** [March 12, 2019, 1:50pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/10 "2019-03-12T13:50:25Z")

</div>

I have no problem in my code, my code works perfect (because I stopped thinking about pixels in whole numbers)! I just want to know how P5 or JS handles drawing ‘decimally’ on the canvas

I made an example to show that shows that decimals matter:  
[https://editor.p5js.org/Milky/sketches/bKgbyQi\_p](https://editor.p5js.org/Milky/sketches/bKgbyQi_p)

---

<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:** [March 12, 2019, 11:55pm UTC](https://discourse.processing.org/t/how-does-p5-or-js-handle-decimal-drawing-on-canvas/9196/11 "2019-03-12T23:55:51Z")

</div>

All versions of the Processing API use fractional pixel coordinates internally - p5.js, Processing(Java), Processing.py, Processing.R etc. This is true for all forms of drawing (rect, ellipse, line, point, PShape, etc. etc.), not just text.

Here is a simple “slow text follows mouse” demo sketch in p5.js:

> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/comment/113094/#Comment_113094)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.

Ability to express fractional pixels is also built in to browser-based javascript rendering and to CSS.

[https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/](https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/)

However, how those get expressed during rendering was for a long time an implementation detail of different browsers:

[https://cruft.io/posts/percentage-calculations-in-ie/](https://cruft.io/posts/percentage-calculations-in-ie/)

As screens (even small ones) increase in size / pixel density and as devices increase in processing power, the general trend is towards all contemporary browsers using sub-pixel rendering.