Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How small can you slice a HTML5 Canvas pixel?

Tags:

html

canvas

In Flash, pixels are calculated using twips, or twentieth of a pixel. Consequently, every position is always in multiples of 0.05. I haven't seen this mentioned in the HTML Canvas spec and am unable to trace the cursor position on Canvas. Does anyone know the accuracy of its pixel calculations?

Edit for clarification:

I'm referring more to Zeno's paradox which says in order to move something from point A to point B, it must first move to a point halfway between the two. And then halfway again, ad infinitum.

So if I want to move on the x axis from point 0 to 100 at 0.5:

  1. At frame 1: 50
  2. Frame 2: 75
  3. Frame 3: 87.5
  4. Then: 93.75, 96.875, 98.4375... etc.

So at what step does the Canvas actually round-up to the next pixel?

like image 694
Marcus Booster Avatar asked May 03 '11 06:05

Marcus Booster


People also ask

Is HTML5 Canvas still used?

The HTML5 canvas has the potential to become a staple of the web, enjoying ubiquitous browser and platform support in addition to widespread webpage support, as nearly 90% of websites have ported to HTML5.

How fast is HTML5 Canvas?

The Canvas tab loaded in one second and takes up 30MB. It also takes up 13% of CPU time all of the time, regardless of whether or not one is looking at it. Video on the HTML page, while I am not moving objects, is actually perfectly smooth.

How do you get pixels on canvas?

To get the pixel of any specific portion from HTML canvas you can use the HTML canvas getImageData() Method. The getImageData() method usually returns an ImageData object that contains the pixel information of the specified object on the HTML canvas.

What can you do with HTML5 Canvas?

According to the HTML5 specification, the CANVAS element is: “...a resolution-dependent bitmap canvas, which can be used for rendering graphs, game graphics, art, or other visual images on the fly.” The CANVAS element lets you draw graphs, graphics, games, art, and other visuals right on the web page in real-time.


1 Answers

I'm unsure what you mean by accuracy of slicing.

Pixels on the Canvas can be drawn to a little less than 0.10, after which they make barely any visible impact.

Of course, if you scale, you can draw things that are 0.00125 pixels, and so on. But they won't be visible if you unscale.

http://jsfiddle.net/GvVD9/

(That first square block on the top-left is a pixel)

Accuracy of the mouse is an entirely different thing, in no way related to the canvas spec.

EDIT:

Well, we can sorta demonstrate that. We can draw a bunch of pixels with y values approaching 100 and see how they compare to a red pixel drawn with the y value 100.

http://jsfiddle.net/GvVD9/46/

Every single horizontally separated piece is just a single 1 by 1 pixel rect using the drawRect command.

50
75
87.5
93.75  // first black pixel you see in image
96.875
98.4375
99.21875
99.609375
99.8046875
99.90234375
99.951171875
99.9755859375
99.98779296875
99.993896484375
99.9969482421875 // last black pixel you see in image

enter image description here

like image 155
Simon Sarris Avatar answered Sep 25 '22 06:09

Simon Sarris