CODEWITHSUNDEEP
javascriptdomcanvaspixel
Casper Beyer
Casper Beyer

Reputation: 2301

Canvas pixel bleeding / accuracy issue

Running into what appear to be rounding errors when drawing tile data with canvas, just to illustrate the point boiled it down to the minimal reproducible example. Basically the draw call is using the source rectangle of (0, 0, 32, 32), which is the grid in the illustration. But Firefox grabs a sliver more, sampling past the source rectangle.

Top section is Firefox, bottom Section is Google Chrome Top is Firefox, bottom is Chrome

Ideas?

Upvotes: 1

Views: 395

Answers (1)

the8472
the8472

Reputation: 43052

  • for pixel graphics you probably want to set smoothing to false
  • you should make sure you're not passing non-integer values to any of the canvas methods
  • if you're not displaying the canvas element at its native size (i.e. due to CSS resizing) then you also want to set the CSS property image-rendering to crisp-edges.

Upvotes: 1

Related Questions