search

mobomo / sketch.js

A jQuery plugin for dead simple Canvas-based drawing.
http://intridea.github.com/sketch.js
290 stars 110 forks source link

Solution for improved performance on mobile (tested on iPad) #17

Open karlwhite opened 11 years ago

karlwhite commented 11 years ago

In using sketch.js on iPad, I have noticed serious performance degradation as more and more actions are added to the action list. I've never really used HTML5 canvas before (so I haven't pushed this code in, just in case I'm doing something very wrong).

Basically, my fix involves rasterizing the content of the canvas periodically. I create an image buffer, then every few actions (currently every 10, but feel free to change), I take the entire canvas, copy it into an image buffer, then clear the action list.

So far this has massively improved performance for me on iPad (where it would previously slow to a complete crawl once anything more than a basic sketch was drawn).

Here is a gist containing my code. Please let me know if you think I should add it in and create a pull request (unless someone else would like to do it).

https://gist.github.com/buncle/6032693

It currently defaults to no-buffer, so the default behavior is not affected. In order to use this image buffer, you should provide {buffer:true} when initializing sketch.js.

(P.s. as an added bonus, I have a 'clear' tool built into this code that seems to work cross-platform... simply create a tool using a "data-clear" attribute)

benadamstyles commented 10 years ago

This is excellent. Great work, thanks.