Pergunta

Is a canvas capable of handling double numbers like 0.5, 10.4 etc? Or would this be rounded internally to an integer (if yes, how?).

I'm asking because I think that elements on a canvas are represented as pixels.

And as a pixel is always size 1x1 (correct me if I'm wrong), is there any advantage of more accurate drawing if I supply double values to a canvas function rather than integer?

Foi útil?

Solução

Fractional coordinates are possible, as the browser can use them to interpolate things on the pixel level. For outlines this results in anti-aliasing, while for interior pixels this interpolation might make things a bit fuzzy. Particularly if your object is not formed by individual pixels, but instead something rather smooth, e.g. a circle, then rendering at the sub-pixel level can give users an impression of more resolution than actually physically possible, due to the way we perceived the anti-aliased outline.

But as raina77ow stated in a comment to your question, this comes at a cost in terms of added work by the browser, which causes a performance penalty. So I'd use these guidelines to make the decision:

  • If the thing to draw is made up of regions of pixels, all of the filled with the same color, and high contrast between adjacent regions, then I'd use integral coordinates since double coordinates will cause blurring which might look bad.
  • If you only draw a few things not too often, and geometrical precision is desirable, then use double coordinates.
  • If you have to worry about performance, then use integer coordinates.

As your question is also tagged : Have a look at the RenderingHints. The stroke control setting will control whether coordinates are rounded in some cases or not, while the antialiasing and interpolation settings will affect how fractional positions are rendered, the first for vector outlines and the second for raster images.

Outras dicas

No, I don't think that a canvas can hand double points. A work around though is to cast the double to a int. This way, the number is treated like a int and it works like usual. The casting looks like this:
db.drawImage(image, (int) x, (int) y;
I use this in my games and it works great.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top