29a.ch by Jonas Wagner

Canvas Tag drawImage performance

By

Today I was tracking down a strange performance bottleneck in a html5 canvas based application I'm writing. In some occasions calling drawImage on a canvas was very slow. It took me a little while to figure out the reason. drawImage was always getting very slow when floats were used as coordinates. Let me give you a little example:

// slow
ctx.drawImage(img, 10.1, 3.4);
// fast
ctx.drawImage(img, 10, 3);

I guess the browsers are doing some kind of expensive resampling when float coordinates are used. After changing all the drawImage calls to pass integers the rendering was a lot faster.