Lyndon Armitage Lyndon is a general Developer. He has a keen interest in AI and Games Programming and runs a blog that he periodically updates.

Handling Floating Point coordinates with Pixels in SVG & HTML5 Canvas?

1 min read

Recently I have been working on a problem with SVG & the HTML5 Canvas that causes bad looking output in some of our files. It was first brought to our attention by a client.

Here is the test file I was using, it was made in OpenOffice and exported as a PDF document (OpenOffice is one of the tools that creates nicely structured PDFs)

Here you can see the SVG output on my test file.

The look of the SVG

And here you can see the HTML canvas output (notice it’s much more easy to identify that there’s a problem).

The look of the HTML

What we have here is a problem with how SVG and the Canvas interpret their grid system. An image consists of an array of pixels with different attributes, or in the case of vector images, a set of equations that can be used to describe what pixels should look like at any given size. The pixels themselves are treated as indivisible units, so you can’t have half a pixel. However in SVG and HTML5’s Canvas the grid allows for floating point positions. This in itself, causes you to run into issues when wanting to draw pixel perfect graphics using these technologies as their grid treats coordinates like this:

SVG and Canvas treatment

The green square represents a pixel and it’s coordinates are actually: 0.5, 2.5 on canvas and SVG. In other situations and programs you would expect the coordinate of said pixel to be: 0, 2

So the canvas treats pixels as points and lets you place them with ‘infinite’ precision but this means placing them at point 0, 2 would result in the point overlapping 4 pixels; so it averages the colour of the pixel across all 4. This results in the blurry lines you can see in my examples.

A good diagram of this effect can be found in the Canvas tutorial provided on Mozillas website:

Mozillas example

The client who pointed out the problem proposed the solution of adding 0.5 to each of our coordinates, which improved the look of the file in question, but causes problems in other cases because of fractional line lengths. Which in turn means we need to re-factor some more of our code. All in all this issue has caused much confusion among us and other developers but I can see why they choose to use such a coordinate system, it just means you need to take extra care when planning to use the canvas for pixel perfect shapes and lines. What do you think of the canvas and SVG coordinate system?

This post is part of our “SVG Article Index” in these articles, we aim to help you build knowledge and understand SVG.

IDRsolutions develop a Java PDF Viewer and SDK, an Adobe forms to HTML5 forms converter, a PDF to HTML5 converter and a Java ImageIO replacement. On the blog our team post anything interesting they learn about.

Lyndon Armitage Lyndon is a general Developer. He has a keen interest in AI and Games Programming and runs a blog that he periodically updates.

Enabling SVG Gzip Compression on Apache and NGINX

Gzip compression is a widely supported method of reducing the size of the content sent from a web server in order to improve the...
Leon Atherton
47 sec read

One Reply to “Handling Floating Point coordinates with Pixels in SVG &…”

  1. Thank you very much, this was most insightful!

    Perhaps a solution would be:
    Take some floating point coordinate x = 10.645
    x + 0.5 = 11.145
    truncate(x) = 11
    x – 0.5 = 10.5

Leave a Reply

Your email address will not be published. Required fields are marked *

IDRsolutions Ltd 2019. All rights reserved.