19

I'm working on a webapp (will only be running in Chrome 19+) that is currently built with CSS3 transitions. More specifically, I'm using Jquery Transit to fire the CSS3 animations with Jquery itself. The reasoning here was that some of the animations are drawn out for several seconds and jquery animate wasn't smooth enough, but Transit is a great fix for this. Jquery Transit is working quite well but I'm curious to whether HTML5 Canvas will render things even smoother? And if so, is it worth pursuing, given the fact that I'm using AJAX and percentage-based locations for DIVs currently? If anyone here knows how CSS3 Animations compare to HTML5 Canvas performance in Chrome and would be willing to give their input I would greatly appreciate it!

Improve this question
5
  • 3
    This should help you decide. stackoverflow.com/questions/4842872/… Commented Jun 25, 2012 at 1:14
  • 1
    Also, HTML5 canvas performance will be better on IE9+. Hardware acceleration integration into new versions of IE is impressive. Commented Jun 25, 2012 at 1:17
  • @DarkXphenomenon: Very interesting test! Being that my application will only be shown on Chrome 19+, it seems like CSS3 animations perform just as well (if not better) than Canvas, at least as of version 8? Commented Jun 25, 2012 at 1:28
  • 1
    yeah. you should probably go with CSS3. Commented Jun 25, 2012 at 1:30
  • 3
    Besides performance, you might also consider if canvas would be appropriate for the situation. What is easily done with CSS and HTML might become overly complex with canvas. Of course, if you wanted fiery explosions or something else where canvas would be better suited, a hybrid would be best (ie. just using canvas for the effect and keeping everything else in CSS) Commented Jun 25, 2012 at 1:30

2 Answers 2

Reset to default
17

CSS3 will give you fewer headaches and you can change it easily in the future, and it will work gracefully on systems that aren't canvas-enabled.

If you're using text, you should absolutely stick with CSS if you can get away with it. Canvas ruins the accessibility of your app and disallows users from using a carat or highlighting text or using text to speech.

If you're just making a funny sliding button or something then you should also just use CSS as it will probably be much easier to implement and maintain. Redoing CSS is easier than slogging over (what can be complex) JavaScript.

I can't honestly tell you if canvas renderings will be smoother. One plus of the canvas is that you can animate things to a seemingly larger size (while keeping the canvas the same size) without having to cause the DOM to re-layout. On most modern systems this really isn't an issue thought.

Furthermore, if its already done with CSS3, are you actually having performance problems? If nobody has complained about performance yet, why bother rewriting it for canvas? If you aren't encountering any real performance problems so far, why reinvent your app?

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Yeah I see what you mean. Essentially we're trying to get the highest performance on the cheapest hardware to run the app, but Canvas definitely seems like more hassle than its worth for this type of implementation - especially since you mentioned ruining the accessibility. We're using a lot of text so that would indeed be a deal breaker. Thanks for the input!
Looks like a good answer, but in the end you admit you don't know if canvas would be better so you don't answer the question, actually :)
The performance landscape was changing far too quickly in 2012 to give a "for sure" answer. Benchmarking had to be done if you cared.
1

The problem I think you might run into with canvas is that it is bitmap based. Therefore scaling up and down after the page is initially rendered will be a problem. Furthermore, line breaks will be painful to deal with potentially. The people who write your site's content might find it challenging to insert line breaks because there is no such thing as a line break using canvas, svg, or vml. In fact you need to pre-compute line breaks. "\n" using raphael.js works, but it isn't great. Furthermore you can't use selectors to target various portions if you in your svg graphics. You may be able to using canvas, maybe.... Canvas probably has a buncha of the same gotchas.

On the image front you will have blurry images if it scales and there are less libraries out there that deal with image resizing for canvas. This may change in the future, but it will still be an ordeal to deal with. I'd just stick with your divs/css3 with jquery fallbacks for older browsers.

From a purely performance perspective, checkout the first comment on your question. It has some nice benchmarks.

Improve this answer

1 Comment

I gotcha - yeah line breaks are especially important in our implementation because we're using a lot of text. From what I'm understanding, using a lot of styled text (or dynamic HTML content) means sticking with CSS3 for animations, while canvas seems much more applicable for drawing shapes and games etc?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.