Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Using whole pixel canvas rendering #4

Merged
1 commit merged into from

2 participants

@aduros

(Details in commit message)

This of course does ever so slightly change the visual appearance of what is drawn, but the benefit is potentially large and worth considering. For animation, the effect is unnoticeable.

Bruno Garcia Truncate to int to avoid subpixel rendering.
On browsers that don't accelerate canvas, subpixel rendering is done in
software and is a lot slower. Rendering on whole pixels can allow software
renderers to just do a simple pixel copy.

On my system (Linux, Firefox 4 beta 10) this change significantly speeds
up the canvas demo and improves my overall score from 81 to 143 sprites.
This seems to be supported by the results of this benchmark:
http://jsperf.com/drawimage-whole-pixels
4f9315e
@cory

Seems logical. May ultimate add this as a test case. Thank you!

This issue was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 28, 2011
  1. Truncate to int to avoid subpixel rendering.

    Bruno Garcia authored
    On browsers that don't accelerate canvas, subpixel rendering is done in
    software and is a lot slower. Rendering on whole pixels can allow software
    renderers to just do a simple pixel copy.
    
    On my system (Linux, Firefox 4 beta 10) this change significantly speeds
    up the canvas demo and improves my overall score from 81 to 143 sprites.
    This seems to be supported by the results of this benchmark:
    http://jsperf.com/drawimage-whole-pixels
This page is out of date. Refresh to see the latest.
Showing with 3 additions and 3 deletions.
  1. +3 −3 public/javascript/canvas_render.js
View
6 public/javascript/canvas_render.js
@@ -57,12 +57,12 @@ var CanvasRender = (function() {
var nst = -st;
ctx.transform(ct + 0.000001, st, nst, ct + 0.000001, framedata.pos[0], framedata.pos[1]);
// ctx.transform(ct, st, nst, ct, framedata.pos[0], framedata.pos[1]);
- ctx.drawImage(framedata.image, framedata.x, framedata.y, framedata.size[0],
+ ctx.drawImage(framedata.image, framedata.x | 0, framedata.y | 0, framedata.size[0],
framedata.size[1], 0, 0, framedata.size[0]*framedata.scale, framedata.size[1]*framedata.scale);
ctx.setTransform(1, 0, 0, 1, 0, 0);
} else {
- ctx.drawImage(framedata.image, framedata.x, framedata.y, framedata.size[0],
- framedata.size[1], framedata.pos[0], framedata.pos[1],
+ ctx.drawImage(framedata.image, framedata.x | 0, framedata.y | 0, framedata.size[0],
+ framedata.size[1], framedata.pos[0] | 0, framedata.pos[1] | 0,
framedata.size[0]*framedata.scale, framedata.size[1]*framedata.scale);
}
Something went wrong with that request. Please try again.