I have been working on an application that performs some animation in HTML5 Canvas. The animation involves drawing of stokes,images and moving images. Initially I took the easiest path for coding animation, which is clearing canvas every time and drawing new positions of objects. When tested this application on my laptop, in Chrome, everything worked fine and performance was satisfactory.
However when I ran the same application on my Xoom tablet, animation was extremely slow. Obviously clearing canvas and redrawing everything again and again was not a good idea. I did know that this approach was bad for animation, but since it worked fine on my laptop, I did not bother to change it initially. However I was surprised by how bad it performed on Android. I saw many complaints about performance of Canvas on Android in many forum posts and blogs. Apparently, as per many posts, performance of Canvas is much better on iOS than Android, but I can’t confirm this.
Most of the recommendations online for improving performance fell in two categories 1. Redraw only what has changed 2. Use multiple layers of canvas to cache objects that do not change during animation. The first option did not suit my application, because I had too many objects on the Canvas and I thought computing which objects need to be redrawn would have been only little better or as bad as redrawing every frame.
Fortunately my application does not have too many images moving at the same time. When an image changes position, I need to redraw what was hidden by the image in its previous location and draw the image at its new location. So I thought I would draw all objects, except the one that is about to be moved on a backup Canvas, and every time image moves, convert main canvas to an image and then draw this image every time image is moved before drawing moving image at a new location.One side effect of this approach is that image that is moving appear in the front even if there were other objects on top of it. But that is acceptable in my application.
So I started looking for Canvas API for converting it to an image. Initially I found two APIs for this –
- Canvas.toDataURL(imageType) : This function creates image (of given image type – this argument is optional) data as base64 encoded. This is useful if you want to save/send data in text format. But the size of data becomes too big. Also this function is not implemented in Android 2.2/2.3. It is implemented in Android 4.0 (ICS).
- Canvas.getImageData and Canvas.putImageData : You can specify top,left coordinates of canvas from where to get image data and width and height of image from that location. This returns ImageData object. You can use it in putImageData function to write the data back on the Canvas.
I did not want to use toDataURL because of base64 format (too big). get/put imageData looked promising. However for some reason it did not work as expected when used to get/put only part of the image. I still need to debug this issue.
Then I read this description of Canvas.drawImage() – you can use this function on “HTMLImageElement, an HTMLCanvasElement, or an HTMLVideoElement”. So you can use one Canvas as the first argument to this function and copy its content to another Canvas. This was something I was looking for. So I changed my animation code as follows –
- Create a backup Canvas element in the document.
- Just before an image is to be moved on the main Canvas, draw everything from the main canvas to the backup canvas, except the image to be moved.This content (on the backup Canvas) is not going to change during animation.
- When the image is moved, copy static content from the backup Canvas to the main Canvas at previous image location. For example, if the image that is moving, has width w1 and height h1 and it is being moved from x1, y1 to x2, y2 then I copy image from the backup Canvas from x1, y1, width w1 and height h1to the main Canvas at x1,y1. This will expose previously hidden object under the image that is being moved. Then I draw the image on the main Canvas at x2,y2
After above changes the performance is much better on Android. It is still not as good as I would have liked, but there is significant performance improvement.
-Ram Kulkarni
Update : Improving Animation Performance in HTML5 Canvas – Part II
Hi folks. maybe see you around the forums.This site is massive!
Terrific content, I am browsing back often to look for upgrades.
I would like to say thank you so much for that work you have made in writing this article. I am hoping the same perfect job by you later on as well.
Not my cup of tea.
Never say never.
Wow, amazing blog layout! How long have you been blogging for? you make blogging look easy. The overall look of your website is excellent, as well as the content!
@Beverly, I have been blogging on and off on ColdFusion team blog, but started my personal blog two months back
Wonderful beat ! I would like to apprentice while you amend your website, how can i subscribe for a blog site? The account helped me a acceptable deal. I had been tiny bit acquainted of this your broadcast provided bright clear idea
@Nicol, there is a subscribe section on the right side of the blog, just below calendar
It is perfect time to make some plans for the future and it’s time to be happy. I’ve read this post and if I could I want to suggest you few interesting things or suggestions. Maybe you can write next articles referring to this article. I wish to read more things about it!
@Ona, please do send me your suggestions on this post. You can either post that as comment or send me via ‘Contact Me’ form
Well I definitely liked studying it. This post provided by you is very effective for good planning.
I like what you guys are up too. Such smart work and reporting! Carry on the excellent works guys I have incorporated you guys to my blogroll. I think it’ll improve the value of my site 🙂
I needed to create you a little note so as to give thanks once again for your personal beautiful tactics you’ve contributed in this case. It has been so particularly open-handed of people like you to provide openly what exactly numerous people might have offered for an ebook in order to make some cash for themselves, mostly given that you might have done it in case you considered necessary. The things additionally acted as a great way to be aware that other individuals have the same fervor really like mine to grasp a great deal more with reference to this issue. I am certain there are several more enjoyable periods up front for those who scan your website.
I’ve been absent for a while, but now I remember why I used to love this web site. Thanks , I¡¦ll try and check back more often. How frequently you update your site?
I’ve been absent for some time, but now I remember why I used to love this web site. Thanks , I will try and check back more frequently. How frequently you update your web site?
Whats up very cool blog!! Man .. Beautiful .. Amazing .. I’ll bookmark your website and take the feeds also¡KI am glad to seek out numerous useful information right here in the put up, we need develop more techniques in this regard, thank you for sharing. . . . . .
It¡¦s really a great and useful piece of info. I¡¦m happy that you simply shared this useful information with us. Please stay us informed like this. Thank you for sharing.
I have been surfing online more than 3 hours today, yet I never found any interesting article like yours. It is pretty worth enough for me. In my opinion, if all web owners and bloggers made good content as you did, the net will be a lot more useful than ever before.
Good ¡V I should definitely pronounce, impressed with your web site. I had no trouble navigating through all tabs and related info ended up being truly simple to do to access. I recently found what I hoped for before you know it in the least. Quite unusual. Is likely to appreciate it for those who add forums or something, website theme . a tones way for your client to communicate. Nice task..
I’ve been absent for a while, but now I remember why I used to love this website. Thank you, I¡¦ll try and check back more often. How frequently you update your website?
Hi, i think that i saw you visited my website thus i came to “return the favor”.I’m trying to find things to improve my web site!I suppose its ok to use some of your ideas!!
I truly appreciate this post. I¡¦ve been looking all over for this! Thank goodness I found it on Bing. You’ve made my day! Thx again
What i don’t realize is in reality how you are not actually much more neatly-favored than you may be right now. You’re so intelligent. You already know thus considerably on the subject of this subject, produced me in my view imagine it from numerous varied angles. Its like men and women are not interested except it¡¦s one thing to do with Lady gaga! Your individual stuffs excellent. At all times care for it up!
Hi my loved one! I want to say that this article is amazing, nice written and come with approximately all important infos. I would like to look more posts like this .
Thank you a bunch for sharing this with all folks you actually recognize what you are talking approximately! Bookmarked. Kindly also seek advice from my site =). We may have a hyperlink trade contract between us!
Thank you for the sensible critique. Me & my neighbor were just preparing to do a little research about this. We got a grab a book from our local library but I think I learned more clear from this post. I am very glad to see such excellent information being shared freely out there.
You could certainly see your enthusiasm within the paintings you write. The world hopes for more passionate writers like you who aren’t afraid to say how they believe. Always go after your heart.
Thanks a lot for giving everyone an exceptionally wonderful opportunity to discover important secrets from this website. It’s always so good and packed with a good time for me and my office mates to search your website at the very least 3 times a week to see the latest stuff you have got. And of course, we’re actually impressed considering the powerful creative ideas served by you. Certain two areas in this post are particularly the most suitable we have all had.
I was suggested this blog by my cousin. I am not sure whether this post is written by him as nobody else know such detailed about my problem. You are wonderful! Thanks!
I am very happy to read this. This is the type of manual that needs to be given and not the accidental misinformation that is at the other blogs. Appreciate your sharing this greatest doc.
Magnificent goods from you, man. I have understand your stuff previous to and you’re just extremely magnificent. I really like what you have acquired here, really like what you are stating and the way in which you say it. You make it enjoyable and you still care for to keep it sensible. I can’t wait to read much more from you. This is really a great site.
You made various nice points there. I did a search on the subject matter and found the majority of people will go along with with your blog.
My brother suggested I might like this web site. He was entirely right. This post truly made my day. You cann’t imagine just how much time I had spent for this information! Thanks!
Hello my loved one! I wish to say that this article is awesome, nice written and come with almost all significant infos. I would like to peer more posts like this .
I think other site proprietors should take this web site as an model, very clean and excellent user friendly style and design, let alone the content. You are an expert in this topic!
Hiya, I’m really glad I have found this info. Nowadays bloggers publish just about gossips and web and this is actually irritating. A good website with exciting content, that’s what I need. Thank you for keeping this web-site, I’ll be visiting it. Do you do newsletters? Cant find it.
I am no longer sure where you’re getting your information, however good topic. I needs to spend some time finding out much more or working out more. Thanks for great info I used to be searching for this info for my mission.
Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to more added agreeable from you! By the way, how can we communicate?
You actually make it seem so easy with your presentation but I find this matter to be really something that I think I would never understand. It seems too complex and very broad for me. I’m looking forward for your next post, I will try to get the hang of it!
Hey, you used to write great, but the last several posts have been kinda boring¡K I miss your tremendous writings. Past few posts are just a little out of track! come on!
Great web site. Lots of useful info here. I¡¦m sending it to several pals ans also sharing in delicious. And naturally, thanks in your sweat!
Thanks a lot for providing individuals with an exceptionally breathtaking opportunity to check tips from this blog. It’s always very good and as well , packed with a great time for me and my office mates to visit your website minimum thrice in a week to see the latest secrets you have got. And lastly, we are usually amazed for the tremendous tricks you serve. Selected 3 points on this page are definitely the very best we have ever had.
Perfect information and facts! I have been browsing for anything like this for some time finally. With thanks!
Thank you for sharing superb informations. Your web-site is so cool. I’m impressed by the details that you have on this site. It reveals how nicely you perceive this subject. Bookmarked this website page, will come back for more articles. You, my pal, ROCK! I found simply the info I already searched all over the place and just could not come across. What an ideal web-site.
As a Newbie, I am continuously browsing online for articles that can help me. Thank you
Like a bolt from the blue.
Thanks for the sensible critique. Me and my neighbor were just preparing to do a little research about this. We got a grab a book from our area library but I think I learned more from this post. I’m very glad to see such great info being shared freely out there.
Don’t put all your eggs in one basket.
That is a little something I have to do more research into, thanks for the post.
I really like your blog.. very nice colors & theme. Did you create this website yourself or did you hire someone to do it for you? Plz reply as I’m looking to design my own blog and would like to know where u got this from. many thanks
I loved as much as you will receive carried out right here. The sketch is attractive, your authored material stylish. nonetheless, you command get got an edginess over that you wish be delivering the following. unwell unquestionably come more formerly again since exactly the same nearly very often inside case you shield this hike.
There is noticeably a bundle to realize about this. I assume you made various good points in features also.
I am not positive where you’re getting your information, however great topic. I needs to spend some time studying much more or figuring out more. Thanks for great info I was on the lookout for this information for my mission.
Could be difficult to find skilled people about this matter, nevertheless, you seem like you are aware of exactly what you are speaking about! Appreciate it
Great write-up, I¡¦m regular visitor of one¡¦s website, maintain up the nice operate, and It’s going to be a regular visitor for a long time.
An insightful blog post right there mate . Thank you for the post !
I simply wanted to post a remark to be able to thank you for these precious steps you are showing on this website. My extended internet research has finally been rewarded with good details to talk about with my relatives. I would claim that most of us visitors actually are quite blessed to be in a remarkable place with many lovely professionals with beneficial tips and hints. I feel extremely fortunate to have come across your website and look forward to some more entertaining minutes reading here. Thanks a lot once again for all the details.
Thank you to all who have left comments on this post. There are more than 50 comments now, most of them are about my blog in general and not specific to this post. So I am going to close comments on this post.