Home/ Questions/Q 7066703
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T05:06:46+00:00

I’m trying to figure out why, when I give large a large number to

  • 0

I’m trying to figure out why, when I give large a large number to the x component of a translate() call on an HTML canvas, rectangles no longer seem to draw at the appropriate coordinates.

In the example below, the two rectangles that are drawn differ only by 1 in the x component. Therefore, I would expect their left edges to be only one pixel apart. As you can see in Firefox and Chrome, that is not what happens.

<html>
<head>
    <script type="text/javascript">
        function go() {
            var canvas = document.getElementById("canvas");
            if(canvas.getContext) {
                var ctx = canvas.getContext("2d");
                ctx.translate(-1000000000, -500);
                ctx.fillStyle = '#F00'
                ctx.fillRect(1000000033, 520, 100, 200);
                ctx.fillStyle = '#00F';
                ctx.fillRect(1000000032, 720, 100, 200);
            }
        }
    </script>
</head>
<body onload="go();">
<canvas id="canvas" width="800" height="600">
</canvas>
</body>
</html>

Here’s the same example ready to look at:
http://jsfiddle.net/pQst6/

I also made an animated version. http://jsfiddle.net/ry35e/ As you can see, the drawing starts normal, but as the x parameter to the translate method increases, it proceeds to have weirder and weirder behavior.

Both Firefox and Chrome appear to behave the same, so it seems like expected behavior, not a browser bug. I am guessing it is some kind of precision problem. Do you agree/disagree?

If it is some kind of precision problem with canvas, I am guessing I will have to find or implement my own transformation matrix and wrap it around the canvas context. I’m sure it wouldn’t be very hard to make, but does anybody know of a javascript library that does such transformations (with pop, push, etc)?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The deviations occur when you invoke fillRect with the integer 2^24 (16 777 216) or greater. This also happens to be the largest integer you can express with single precision. The working draft states support for double precision (2^53) but apparently that’s not the case (yet). The Mozilla Developer Network (MDN) documentation of the CanvasRenderingContext2D states support for only single precision (float).

    • 0