API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 5th, 2013
454
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 88.54 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5.    
  6.     <title>javascript - HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices - Stack Overflow</title>
  7.     <link rel="shortcut icon" href="//cdn.sstatic.net/stackoverflow/img/favicon.ico">
  8.     <link rel="apple-touch-icon image_src" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
  9.     <link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml">
  10.     <meta name="twitter:card" content="summary">
  11.     <meta name="twitter:domain" content="stackoverflow.com"/>
  12.     <meta name="og:type" content="website" />
  13.     <meta name="og:image" content="http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon@2.png?v=fde65a5a78c6"/>
  14.     <meta name="og:title" content="HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices" />
  15.     <meta name="og:description" content="DO YOU KNOW SOME MORE BEST PRACTICES FOR CANVAS??
  17. Please add to this thread what you know, have learned, or have read online any and all Canvas best practices, tips/tricks for performance
  19. With Ca..." />
  20.     <meta name="og:url" content="http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices"/>
  21.     <link rel="canonical" href="http://stackoverflow.com/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices" />
  22.  
  23.    
  24.    
  25.     <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  26.     <script src="//cdn.sstatic.net/Js/stub.en.js?v=0c501610f52c" type="text/javascript"></script>
  27.     <link rel="stylesheet" type="text/css" href="//cdn.sstatic.net/stackoverflow/all.css?v=6a89240d9097">
  28.    
  29.     <script type="text/javascript">
  30.        
  31.         StackExchange.ready(function () {
  32.             StackExchange.using("postValidation", function () {
  33.                 StackExchange.postValidation.initOnBlurAndSubmit($('#post-form'), 2, 'answer');
  34.             });
  35.  
  36.            
  37.             StackExchange.question.init({votesCast:[],canViewVoteCounts:true,totalCommentCount:0,shownCommentCount:0,highlightColor:'#F4A83D',backgroundColor:'#FFF',questionId:8205828});
  38.  
  39.             styleCode();
  40.  
  41.                 StackExchange.realtime.subscribeToQuestion('1', '8205828');
  42.            
  43.                     });
  44.     </script>
  45.  
  46.  
  47.     <script type="text/javascript">
  48.         StackExchange.ready(function () {
  49.             StackExchange.realtime.init('wss://qa.sockets.stackexchange.com,ws://qa.sockets.stackexchange.com');
  50.             StackExchange.realtime.subscribeToInboxNotifications();
  51.                     StackExchange.realtime.subscribeToReputationNotifications('1');
  52.                             StackExchange.realtime.subscribeToTopBarNotifications('1');
  53.         });
  54.     </script>
  55.     <script type="text/javascript">
  56.         StackExchange.init({"locale":"en","stackAuthUrl":"https://stackauth.com","serverTime":1386237136,"styleCode":true,"enableUserHovercards":true,"site":{"name":"Stack Overflow","description":"Q&A for professional and enthusiast programmers","isNoticesTabEnabled":true,"recaptchaPublicKey":"6LdchgIAAAAAAJwGpIzRQSOFaO0pU6s44Xt8aTwc","enableSocialMediaInSharePopup":true},"user":{"fkey":"13a86334112524feef461ced01ab29d4","isRegistered":true,"userType":3,"userId":508666,"accountId":239224,"gravatar":"<div class=\"gravatar-wrapper-32\"><img src=\"http://i.stack.imgur.com/nZEUQ.png?s=32&g=1\" alt=\"\"></div>","profileUrl":"http://stackoverflow.com/users/508666/peehaa","notificationsUnviewedCount":0,"inboxUnviewedCount":0,"ab":{"anonymoushero":{"v":"1","g":1}}}});
  57.         StackExchange.using.setCacheBreakers({"js/prettify-full.en.js":"e0bbd4760e83","js/moderator.en.js":"1a411fd265fe","js/full-anon.en.js":"0a48c3f5abce","js/full.en.js":"11c773a111b1","js/wmd.en.js":"bd9234d44a40","js/third-party/jquery.autocomplete.min.js":"e5f01e97f7c3","js/third-party/jquery.autocomplete.min.en.js":"","js/mobile.en.js":"d1d834ef85d2","js/help.en.js":"d3cc74d8a93a","js/tageditor.en.js":"6d51a5f8d7f3","js/tageditornew.en.js":"111b781cf314","js/inline-tag-editing.en.js":"f951bd09dc69","js/revisions.en.js":"33fd38144303","js/review.en.js":"b44cee8b2b0b","js/tagsuggestions.en.js":"e4e7b952fcc7","js/post-validation.en.js":"c275fe37d674","js/explore-qlist.en.js":"73825bd006fc","js/events.en.js":"d92fbd81d9fd"});
  58.         StackExchange.using("gps", function() {
  59.              StackExchange.gps.init(true);
  60.         });
  61.        
  62.     </script>
  63.    
  64. </head>
  65. <body class="question-page new-topbar">
  66.     <noscript><div id="noscript-padding"></div></noscript>
  67.     <div id="notify-container"></div>
  68.     <div id="overlay-header"></div>
  69.     <div id="custom-header"></div>
  70. <div class="topbar">
  71.     <div class="topbar-wrapper">
  72.        
  73.         <div class="js-topbar-dialog-corral">
  74.  
  75. <div class="topbar-dialog siteSwitcher-dialog dno">
  76.     <div class="header">
  77.         <h3><a href="//stackexchange.com/sites">Explore our sites</a></h3>
  78.     </div>
  79.     <div class="modal-content">
  80.         <ul class="current-site">
  81.                 <li>
  82.                         <a href="//stackoverflow.com" class="current-site-link site-link js-site-link">
  83.         <div class="site-icon favicon favicon-stackoverflow" title="Stack Overflow"></div>
  84.         Stack Overflow
  85.     </a>
  86.     <div class="related-links js-related-links">
  87.             <a href="http://chat.stackoverflow.com">chat</a>
  88.                     <a href="http://blog.stackexchange.com">blog</a>
  89.                     <a href="/users/logout">log out</a>
  90.     </div>
  91.  
  92.                 </li>
  93.                 <li class="related-site">
  94.                         <a href="//meta.stackoverflow.com" class="site-link js-site-link">
  95.         <div class="site-icon favicon favicon-stackoverflowmeta" title="Meta Stack Overflow"></div>
  96.         Meta Stack Overflow
  97.     </a>
  98.  
  99.                         <a class="rep-score js-related-links" href="//meta.stackoverflow.com/users/155197">
  100.         4,358
  101.     </a>
  102.  
  103.                 </li>
  104.                             <li class="related-site">
  105.                     <a class="site-link js-site-link" href="//careers.stackoverflow.com">
  106.                         <div class="site-icon favicon favicon-careers" title="Stack Overflow Careers"></div>
  107.                         Stack Overflow Careers 2.0
  108.                     </a>
  109.                 </li>
  110.         </ul>
  111.        
  112.  
  113.  
  114.             <ul>
  115.                     <li>
  116.                             <a href="//webmasters.stackexchange.com" class="site-link js-site-link">
  117.         <div class="site-icon favicon favicon-webmasters" title="Webmasters"></div>
  118.         Webmasters
  119.     </a>
  120.  
  121.                             <a class="rep-score js-related-links" href="//webmasters.stackexchange.com/users/11700">
  122.         901
  123.     </a>
  124.  
  125.                     </li>
  126.                     <li>
  127.                             <a href="//security.stackexchange.com" class="site-link js-site-link">
  128.         <div class="site-icon favicon favicon-security" title="Information Security"></div>
  129.         Information Security
  130.     </a>
  131.  
  132.                             <a class="rep-score js-related-links" href="//security.stackexchange.com/users/2685">
  133.         382
  134.     </a>
  135.  
  136.                     </li>
  137.                     <li>
  138.                             <a href="//codereview.stackexchange.com" class="site-link js-site-link">
  139.         <div class="site-icon favicon favicon-codereview" title="Code Review"></div>
  140.         Code Review
  141.     </a>
  142.  
  143.                             <a class="rep-score js-related-links" href="//codereview.stackexchange.com/users/14812">
  144.         203
  145.     </a>
  146.  
  147.                     </li>
  148.                     <li>
  149.                             <a href="//superuser.com" class="site-link js-site-link">
  150.         <div class="site-icon favicon favicon-superuser" title="Super User"></div>
  151.         Super User
  152.     </a>
  153.  
  154.                             <a class="rep-score js-related-links" href="//superuser.com/users/60642">
  155.         201
  156.     </a>
  157.  
  158.                     </li>
  159.                     <li>
  160.                             <a href="//stackapps.com" class="site-link js-site-link">
  161.         <div class="site-icon favicon favicon-stackapps" title="Stack Apps"></div>
  162.         Stack Apps
  163.     </a>
  164.  
  165.                             <a class="rep-score js-related-links" href="//stackapps.com/users/10013">
  166.         195
  167.     </a>
  168.  
  169.                     </li>
  170.             </ul>
  171.        
  172.             <div class="child-content"></div>
  173.  
  174.     </div>
  175. </div>        </div>
  176.  
  177.         <div class="network-items">
  178.            
  179.             <a href="//stackexchange.com"
  180.               class="topbar-icon icon-site-switcher js-site-switcher-button js-gps-track"
  181.               data-gps-track="site_switcher.show"
  182.               data-child-content-url="/topbar/site-switcher/site-list"
  183.               data-on-class="icon-site-switcher-on"
  184.               title="A list of all 112 Stack Exchange sites">
  185.                 <span class="hidden-text">Stack Exchange</span>
  186.             </a>
  187.            
  188.                 <a href="#"
  189.                   class="topbar-icon icon-inbox js-inbox-button"
  190.                   title="Recent inbox messages">
  191.                     <span class="hidden-text">Inbox</span>
  192.                     <span class="unread-count" style="display:none"></span>
  193.                 </a>
  194.                 <a href="#"
  195.                    class="topbar-icon icon-achievements js-achievements-button "
  196.                    data-unread-class=""
  197.                    title="Recent achievements: reputation, badges, and privileges earned">
  198.                     <span class="hidden-text">Reputation and Badges</span>
  199.                     <span class="unread-count" style="display:none">
  200.                        
  201.                     </span>
  202.                 </a>
  203.         </div>
  204.  
  205.         <div class="topbar-links">
  206.            
  207.                 <a href="/users/508666/peehaa" class="profile-me">
  208.                     <div class="gravatar-wrapper-24" title="PeeHaa"><img src="http://i.stack.imgur.com/nZEUQ.png?s=24&g=1" alt="" class="avatar-me js-avatar-me"></div>
  209.                     <div class="links-container topbar-flair">
  210.  
  211.                         <span class="reputation" title="your reputation: 28,895">
  212.                             28,895
  213.                         </span>
  214. <span title="16 gold badges"><span class="badge1"></span><span class="badgecount">16</span></span><span title="76 silver badges"><span class="badge2"></span><span class="badgecount">76</span></span><span title="141 bronze badges"><span class="badge3"></span><span class="badgecount">141</span></span>                    </div>
  215.                 </a>
  216.                 <div class="links-container">
  217.                     <span class="topbar-menu-links">
  218.                                                     <a href="/review" title="Review queues - help improve the site">
  219.                                 review
  220.                             </a>
  221.  
  222.                             <a href="#" class="icon-help js-help-button" title="Help Center and other resources">
  223.                                 help
  224.                                 <span class="triangle"></span>
  225.                             </a>
  226.                             <div class="topbar-dialog help-dialog js-help-dialog dno">
  227.                                 <div class="modal-content">
  228.                                     <ul>
  229.                                         <li>
  230.                                             <a href="/tour">
  231.                                                 Tour
  232.                                                 <span class="item-summary">
  233.                                                     Start here for a quick overview of the site
  234.                                                 </span>
  235.                                             </a>
  236.                                         </li>
  237.                                         <li>
  238.                                             <a href="/help">
  239.                                                 Help Center
  240.                                                 <span class="item-summary">
  241.                                                     Detailed answers to any questions you might have
  242.                                                 </span>
  243.                                             </a>
  244.                                         </li>
  245.                                             <li>
  246.                                                 <a href="//meta.stackoverflow.com">
  247.                                                     Meta
  248.                                                     <span class="item-summary">
  249.                                                         Discuss the workings and policies of this site
  250.                                                     </span>
  251.                                                 </a>
  252.                                             </li>
  253.                                     </ul>
  254.                                 </div>
  255.                             </div>
  256.                        
  257.                     </span>
  258.                 </div>
  259.  
  260.             <div class="search-container">
  261.                 <form id="search" action="/search" method="get" autocomplete="off">
  262.                     <input name="q" type="text" placeholder="search" value="" tabindex="1" autocomplete="off" maxlength="240" />
  263.                 </form>
  264.             </div>
  265.                
  266.         </div>      
  267.     </div>
  268. </div>
  269. <script>
  270.     StackExchange.ready(function () {
  271.         //topbar.init();
  272.         StackExchange.topbar.init();
  273.     });
  274. </script>    <div class="container">
  275.         <div id="header" >
  276.             <br class="cbt">
  277.             <div id="hlogo">
  278.                 <a href="/">
  279.                     Stack Overflow
  280.                 </a>
  281.             </div>
  282.             <div id="hmenus">
  283.                 <div class="nav mainnavs ">
  284.                     <ul>
  285.                             <li class="youarehere"><a id="nav-questions" href="/questions">Questions</a></li>
  286.                             <li><a id="nav-tags" href="/tags">Tags</a></li>
  287.                             <li><a id="nav-users" href="/users">Users</a></li>
  288.                             <li><a id="nav-badges" href="/help/badges">Badges</a></li>
  289.                             <li><a id="nav-unanswered" href="/unanswered">Unanswered</a></li>
  290.                     </ul>
  291.                 </div>
  292.                 <div class="nav askquestion">
  293.                     <ul>
  294.                         <li>
  295.                             <a id="nav-askquestion"  href="/questions/ask">Ask Question</a>
  296.                         </li>
  297.                     </ul>
  298.                 </div>
  299.             </div>
  300.         </div>
  301.        
  302.  
  303.  
  304.  
  305.         <div id="content">
  306.            
  307.  
  308. <div itemscope itemtype="http://schema.org/Article">
  309.     <link itemprop="image" href="//cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png">
  310.             <div id="question-header">
  311.             <h1 itemprop="name"><a href="/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices" class="question-hyperlink">HTML5 Canvas Performance and Optimization Tips, Tricks and Coding Best Practices</a></h1>
  312.         </div>
  313.             <div id="mainbar">
  314.  
  315.            
  316.  
  317. <div class="question deleted-answer" data-questionid="8205828"  id="question">
  318.    
  319.         <input type="hidden" id="8205828-only-allow-inform-moderator-flagging" value="true" />
  320.         <table>
  321.         <tr>
  322.             <td class="votecell">
  323.                
  324.  
  325. <div class="vote">
  326.     <input type="hidden" name="_id_" value="8205828">
  327.     <a class="vote-up-off" title="This question shows research effort; it is useful and clear (click again to undo)">up vote</a>
  328.     <span class="vote-count-post ">15</span>
  329.     <a class="vote-down-off" title="This question does not show any research effort; it is unclear or not useful (click again to undo)">down vote</a>
  330.    
  331.     <a class="star-off" href="#" title="This is a favorite question (click again to undo)">favorite</a>
  332.     <div class="favoritecount"><b>14</b></div>  
  333.  
  334. </div>
  335.  
  336.             </td>
  337.            
  338. <td class="postcell">
  339. <div>
  340.     <div class="post-text" itemprop="description">
  341.  
  342.         <h1>DO YOU KNOW SOME MORE BEST PRACTICES FOR CANVAS??</h1>
  343.  
  344. <h2>Please add to this thread what you know, have learned, or have read online any and all Canvas best practices, tips/tricks for performance</h2>
  345.  
  346. <p>With Canvas being still very new to internet, and no signs of it ever getting old that I can see in the future, there are not too many documented "best practices" or other really important tips that are a 'must know' for developing with it in any one particular place. Things like this are scattered around and many times on lesser known sites. </p>
  347.  
  348. <p><strong>There's so many things that people need to know about, and still so much to learn about too.</strong> </p>
  349.  
  350. <hr>
  351.  
  352. <p>I wanted to share some things to help people who are learning Canvas and maybe some who already know it quite well and am hoping to get some feedback from others about what they feel are some best practices or other tips and tricks for working with Canvas in HTML5. </p>
  353.  
  354. <p>I want to start off with one I personally found to be quite a useful yet surprisingly uncommon thing for developers to do.</p>
  355.  
  356. <h1>1. Indent your code</h1>
  357.  
  358. <p>Just as you would any other time, in any other language whatever the case may be. It has been a best practice for everything else, and I have come to find that in a complex canvas app, things can get a little confusing when dealing with several different contexts and saved/restore states. Not to mention the code is just more readable and overall cleaner looking too. </p>
  359.  
  360. <p>For example:</p>
  361.  
  362. <pre><code>...
  363. // Try to tell me this doesn't make sense to do
  364. ctx.fillStyle = 'red';
  365. ctx.fill();
  366. ctx.save();
  367.     if (thing &lt; 3) {
  368.         // indenting
  369.         ctx.beginPath();
  370.             ctx.arc(2, 6, 11, 0, Math.PI*2, true);
  371.         ctx.closePath();
  372.         ctx.beginPath();
  373.             ctx.moveTo(20, 40);
  374.             ctx.lineTo(10, 200);
  375.             ctx.moveTo(20, 40);
  376.             ctx.lineTo(100, 40);
  377.         ctx.closePath();
  378.         ctx.save();
  379.             ctx.fillStyle = 'blue'
  380.             ctx.fill();
  381.         ctx.restore();
  382.     } else {
  383.         // no indenting
  384.         ctx.drawImage(img, 0, 0, 200, 200);
  385.         ctx.save();
  386.         ctx.shadowBlur();
  387.         ctx.beginPath();
  388.         ctx.arc(2, 60, 10, 0, Math.PI*2, false);
  389.         ctx.closePath();
  390.         ctx.fillStyle 'green';
  391.         ctx.fill();
  392.         ctx.restore();
  393.     }
  394. ctx.restore();
  395. ctx.drawRect();
  396. ctx.fill();
  397. ...
  398. </code></pre>
  399.  
  400. <p>Is the IF statement not easier and cleaner to read and know what is what immediately going on than the ELSE statement in this? Can you see what I'm saying here? I think this should be a method that developers should continue to practice just as they would when writing plain 'ol javascript or any other language even.</p>
  401.  
  402. <h1>Use requestAnimationFrame instead of setInterval / setTimeout</h1>
  403.  
  404. <p>setInterval and setTimeout were never intended to be used as animation timers, they're just generic methods for calling functions after a time delay.  If you set an interval for 20ms in the future, but your queue of functions takes longer than that to execute, your timer won't fire until after these functions have completed.  That could be a while, which isn't ideal where animation is concerned. <strong>RequestAnimationFrame</strong> is a method which tells the browser that an animation is taking place, so it can optimize repaints accordingly.  It also throttles the animation for inactive tabs, so it won't kill your mobile device's battery if you leave it open in the background.</p>
  405.  
  406. <p>Nicholas Zakas wrote a hugely detailed and informative <a href="http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/" rel="nofollow">article about requestAnimationFrame</a> on his blog which is well worth reading.  If you want some hard and fast implementation instructions, then <a href="http://paulirish.com/2011/requestanimationframe-for-smart-animating/" rel="nofollow">Paul Irish has written a requestAnimationFrame shim</a> – this is what I've used in every one of the Canvas apps I have made until recently.</p>
  407.  
  408. <h2>ACTUALLY</h2>
  409.  
  410. <p>Even better than using requestAnimationFrame in place of setTimeout and setInterval, Joe Lambert has written a <a href="http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/" rel="nofollow">NEW and improved shim</a> called requestInterval and requestTimeout, which he explains what issues exist when using requestAnimFrame.
  411. You can view the <a href="https://gist.github.com/1002116#file_request_interval.js" rel="nofollow">gist of the script</a>.</p>
  412.  
  413. <h2>ACTUALLY x2</h2>
  414.  
  415. <p>Now that all the browsers have caught up on the spec for this, there has been an <a href="http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating" rel="nofollow">update to the requestAnimFrame() polyfill</a>, one which will probably remain the one to use to cover all vendors. </p>
  416.  
  417. <h1>Use more than one canvas</h1>
  418.  
  419. <p>A technique for animation-heavy games which <a href="https://twitter.com/nicolahibbert" rel="nofollow">@nicolahibbert</a> wrote about in a <a href="http://nicolahibbert.com/optimising-html5-canvas-games/" rel="nofollow">post of hers on optimizing Canvas games</a> mentions that it may be better to use multiple canvasses layered on top of one another rather than do everything in a single canvas. Nicola explains that "drawing too many pixels to the same canvas at the same time will cause your frame rate to fall through the floor. Take Breakout for example. Trying to draw the bricks, the ball, the paddle, any power-ups or weapons, and then each star in the background – this simply won't work, it takes too long to execute each of these instructions in turn. By splitting the starfield and the rest of the game onto separate canvases, you are able to ensure a decent framerate."</p>
  420.  
  421. <h2>Render Elements Off-screen</h2>
  422.  
  423. <p>I have had to do this for a few apps I've made including <a href="http://www.facebook.com/samsunggenomeproject/app_197458140327772" rel="nofollow">Samsung's Olympic Genome Project facebook app</a>. It's an extremely useful thing to know and to make use of whether it's needed or not. It decreases load time immensely, plus it can be a really useful technique to load images off screen since they can sometimes take a while.</p>
  424.  
  425. <pre><code>var tmpCanvas = document.createElement('canvas'),
  426.     tmpCtx = tmpCanvas.getContext('2d'),
  427.     img = document.createElement('img');
  428.  
  429. img.onload = function() {
  430.     tmpCtx.drawImage(thumbImg, 0, 0, 200, 200);
  431. };
  432. img.src = '/some/image/source.png';
  433. </code></pre>
  434.  
  435. <p>Notice that the src of the image is set after it is loaded. This is a key thing to remember to do too. Once the images are done loading and drawn into these temp canvases, you can then draw them to your main canvas by using the same ctx.drawImage(), but instead of putting the image as the first argument, you use 'tmpCtx.canvas' to reference the temp canvas.</p>
  436.  
  437. <h3>Other tips, tricks and resources</h3>
  438.  
  439. <ul>
  440. <li><strong><a href="http://philip.html5.org/tests/canvas/suite/tests/" rel="nofollow">Canvas test cases</a></strong></li>
  441. <li><strong><a href="http://kangax.github.com/jstests/" rel="nofollow">Some more canvas and JS tests</a></strong></li>
  442. <li><strong><a href="http://www.html5rocks.com/en/tutorials/canvas/performance/" rel="nofollow">HTML5Rocks performance Improving</a></strong></li>
  443. <li>**<a href="http://blog.digitalbackcountry.com/2012/05/using-requestanimationframe-to-optimize-dragging-events/" rel="nofollow">requestAnimFrame to Optimize Dragging Events</a></li>
  444. </ul>
  445.  
  446. <h3>Canvas has a back-reference</h3>
  447.  
  448. <p>The 2d context has a back reference to it's associated DOM element:</p>
  449.  
  450. <pre><code>var ctx = doc.getElementById('canvas').getContext('2d');
  451. console.log(ctx.canvas);    // HTMLCanvasElement
  452. </code></pre>
  453.  
  454. <p>I'd love to hear more from other people on this. I am working on making a list of things that we should standardize to add a new section to my company's <a href="http://na.standards.com/standards" rel="nofollow">Front-end Code Standards and Best Practices</a>. I'd love to get as much feedback on this as I can.</p>
  455.  
  456.     </div>
  457.     <div class="post-taglist">
  458.         <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a> <a href="/questions/tagged/performance" class="post-tag" title="show questions tagged &#39;performance&#39;" rel="tag">performance</a> <a href="/questions/tagged/optimization" class="post-tag" title="show questions tagged &#39;optimization&#39;" rel="tag">optimization</a> <a href="/questions/tagged/canvas" class="post-tag" title="show questions tagged &#39;canvas&#39;" rel="tag">canvas</a>
  459.     </div>
  460.     <table class="fw">
  461.     <tr>
  462.     <td class="vt">
  463. <div class="post-menu"><a href="/q/8205828/508666" title="short permalink to this question" class="short-link" id="link-post-8205828">share</a><span class="lsep">|</span><a href="/posts/8205828/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#"
  464.       class="close-question-link"
  465.       title="vote to close this question (when closed, no new answers can be added)"
  466.       data-questionid="8205828"
  467.       data-isclosed="false">close</a><span class="lsep">|</span><a href="#"
  468.           id="delete-post-8205828"
  469.           title="2 more votes are needed to undelete this post"
  470.           class="deleted-post load-tooltip-on-hover"
  471.           data-delete-prompt="Vote to delete this post? (19 votes remaining)"
  472.           data-undelete-prompt="Vote to undelete this post? (23 votes remaining)">undelete (1)</a><span class="lsep">|</span><a href="#"
  473.       class="flag-post-link"
  474.       title="flag this post for serious problems or moderator attention"
  475.       data-postid="8205828">flag</a><span class="lsep">|</span><a id="protect-post-8205828" href="#" title="disallow answers by anonymous and very new low rep users">protect</a></div>        
  476.  
  477. <script type="text/javascript">
  478.     StackExchange.using("inlineTagEditing", function () {
  479.         StackExchange.inlineTagEditing.init();
  480.     });
  481. </script>    </td>
  482.     <td align="right" class="post-signature">
  483. <div class="user-info ">
  484.     <div class="user-action-time">
  485.         <a href="/posts/8205828/revisions" title="show all edits to this post">edited <span title="2012-07-29 20:11:57Z" class="relativetime">Jul 29 '12 at 20:11</span></a>
  486.     </div>
  487.     <div class="user-gravatar32">
  488.        
  489.     </div>
  490.     <div class="user-details">
  491.         <br>
  492.        
  493.     </div>
  494. </div>    </td>
  495.     <td class="post-signature">
  496.         <div class="user-info ">
  497.     <div class="user-action-time">
  498.         asked <span title="2011-11-20 23:56:59Z" class="relativetime">Nov 20 '11 at 23:56</span>
  499.     </div>
  500.     <div class="user-gravatar32">
  501.         <a href="/users/297765/jaredwilli"><div><img src="https://www.gravatar.com/avatar/ca85e937926a84231055f0adbaeac6c3?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></a>
  502.     </div>
  503.     <div class="user-details">
  504.         <a href="/users/297765/jaredwilli">jaredwilli</a><br>
  505.         <span class="reputation-score" title="reputation score " dir="ltr">1,529</span><span title="10 silver badges"><span class="badge2"></span><span class="badgecount">10</span></span><span title="17 bronze badges"><span class="badge3"></span><span class="badgecount">17</span></span>
  506.     </div>
  507. </div>
  508.     </td>
  509.     </tr>
  510.     </table>
  511. </div>
  512. </td>
  513.         </tr>
  514. <tr>
  515.     <td class="votecell"></td>
  516.     <td>
  517.         <div id="comments-8205828" class="comments dno" data-localized="true">
  518.             <table>
  519.                 <tbody data-remaining-comments-count="0"
  520.                        data-addlink-html="comments disabled on deleted / locked posts"
  521.                        data-addlink-disabled="true">
  522.                         <tr><td></td><td></td></tr>
  523.                 </tbody>
  524.             </table>
  525.         </div>
  526.             <a id="comments-link-8205828"
  527.                class="comments-link disabled-link"
  528.                title="Use comments to ask for more information or suggest improvements. Avoid answering questions in comments."
  529.                 >comments disabled on deleted / locked posts</a>
  530.     </td>
  531. </tr>            </table>    
  532. </div>
  533. <div class="question-status">
  534.         <h2>                    <b>deleted</b> by <a href="/users/1228/will">Will</a> <span title="2012-08-29 13:02:15Z" class="relativetime">Aug 29 '12 at 13:02</span>
  535. </h2>
  536.         <p></p>
  537.     </div>
  538.  
  539.             <div id="answers">
  540.  
  541.                 <a name="tab-top"></a>
  542.                 <div id="answers-header">
  543.                     <div class="subheader answers-subheader">
  544.                         <h2>
  545.                                 4 Answers
  546.                         </h2>
  547.                         <div>
  548.                             <div id="tabs">
  549.         <a href="/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices?answertab=active#tab-top" title="Answers with the latest activity first">active</a>
  550.         <a href="/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices?answertab=oldest#tab-top" title="Answers in the order they were provided">oldest</a>
  551.         <a class="youarehere" href="/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices?answertab=votes#tab-top" title="Answers with the highest score first">votes</a>
  552. </div>
  553.                         </div>
  554.                     </div>    
  555.                 </div>    
  556.  
  557.  
  558. <div class="pager-answers">
  559.        
  560.  
  561.  
  562.  
  563.  
  564.  
  565.     </div>
  566.  
  567.  
  568. <a name="8485927"></a>
  569. <div id="answer-8485927" class="answer deleted-answer" data-answerid="8485927" >
  570.         <input type="hidden" id="8485927-only-allow-inform-moderator-flagging" value="true"/>
  571.     <table>
  572.         <tr>
  573.             <td class="votecell">
  574.                
  575.  
  576. <div class="vote">
  577.     <input type="hidden" name="_id_" value="8485927">
  578.     <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
  579.     <span class="vote-count-post ">6</span>
  580.     <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>
  581.    
  582.  
  583.  
  584. </div>
  585.  
  586.             </td>
  587.  
  588.  
  589.  
  590. <td class="answercell">
  591.     <div class="post-text"><h1>Redraw Regions</h1>
  592.  
  593. <p>The best canvas optimization technique for animations is to limit the amount of pixels that get cleared/painted on each frame. The easiest solution to implement is resetting the entire canvas element and drawing everything over again but that is an expensive operation for your browser to process.</p>
  594.  
  595. <p>Reuse as many pixels as possible between frames. What that means is the fewer pixels that need to be processed each frame, the faster your program will run. For example, when erasing pixels with the clearRect(x, y, w, h) method, it is very beneficial to clear and redraw only the pixels that have changed and not the full canvas.</p>
  596.  
  597. <h1>Procedural Sprites</h1>
  598.  
  599. <p>Generating graphics procedurally is often the way to go, but sometimes that's not the most efficient one. If you're drawing simple shapes with solid fills then drawing them procedurally is the best way do so. But if you're drawing more detailed entities with strokes, gradient fills and other performance sensitive make-up you'd be better off using image sprites.</p>
  600.  
  601. <p>It is possible to get away with a mix of both. Draw graphical entities procedurally on the canvas once as your application starts up. After that you can reuse the same sprites by painting copies of them instead of generating the same drop-shadow, gradient and strokes repeatedly.</p>
  602.  
  603. <h1>State Stack &amp; Transformation</h1>
  604.  
  605. <p>The canvas can be manipulated via transformations such as rotation and scaling, resulting in a change to the canvas coordinate system. This is where it's important to know about the state stack for which two methods are available: context.save() (pushes the current state to the stack) and context.restore() (reverts to the previous state). This enables you to apply transformation to a drawing and then restore back to the previous state to make sure the next shape is not affected by any earlier transformation. The states also include properties such as the fill and stroke colors.</p>
  606.  
  607. <h1>Compositing</h1>
  608.  
  609. <p>A very powerful tool at hand when working with canvas is compositing modes which, amongst other things, allow for masking and layering. There's a wide array of available composite modes and they are all set through the canvas context's globalCompositeOperation property. The composite modes are also part of the state stack properties, so you can apply a composite operation, stack the state and apply a different one, and restore back to the state before where you made the first one. This can be especially useful.</p>
  610.  
  611. <h1>Anti-Aliasing</h1>
  612.  
  613. <p>To allow for sub-pixel drawings, all browser implementations of canvas employ anti-aliasing (although this does not seem to be a requirement in the HTML5 spec). Anti-aliasing can be important to keep in mind if you want to draw crisp lines and notice the result looks blurred. This occurs because the browser will interpolate the image as though it was actually between those pixels. It results in a much smoother animation (you can genuinely move at half a pixel per update) but it'll make your images appear fuzzy.</p>
  614.  
  615. <p>To work around this you will need to either round to whole integer values or offset by half a pixel depending on if you're drawing fills or strokes.</p>
  616.  
  617. <h2>Using Whole Numbers for drawImage() x and y positions</h2>
  618.  
  619. <p>If you call drawImage on the Canvas element, it's much faster if you round the x and y position to a whole number. </p>
  620.  
  621. <p><a href="http://jsperf.com/drawimage-whole-pixels">Here's a test case on jsperf</a> showing how much faster using whole numbers is compared to using decimals.</p>
  622.  
  623. <p>So round your x and y position to whole numbers before rendering. </p>
  624.  
  625. <h3>Faster than Math.round()</h3>
  626.  
  627. <p><a href="http://jsperf.com/math-round-vs-hack/3">Another jsperf test shows</a> that Math.round() is not necessarily the fastest method for rounding numbers. Using a bitwise hack actually turns out to be faster than the built in method.</p>
  628.  
  629. <p><a href="http://sebleedelisle.com/2011/02/html5-canvas-sprite-optimisation/">Canvas Sprite Optimization</a></p>
  630.  
  631. <h1>Clearing the Canvas</h1>
  632.  
  633. <p>To clear the entire canvas of any existing pixels context.clearRect(x, y, w, h) is typically used – but there is another option available. Whenever the width/height of the canvas are set, even if they are set to the same value repeatedly, the canvas is reset. This is good to know when working with a dynamically sized canvas as you will notice drawings disappearing.</p>
  634.  
  635. <h1>Computation Distribution</h1>
  636.  
  637. <p>The Chrome Developer Tools profiler is very useful for finding out what your performance bottlenecks are. Depending on your application you may need to refactor some parts of your program to improve the performance and how browsers handle specific parts of your code.</p>
  638.  
  639. <p><a href="http://hakim.se/thoughts/canvas-optimization">Optimization techniques</a></p>
  640. </div>
  641.     <table class="fw">
  642.     <tr>
  643.     <td class="vt">
  644. <div class="post-menu"><a href="/a/8485927/508666" title="short permalink to this answer" class="short-link" id="link-post-8485927">share</a><span class="lsep">|</span><a href="/posts/8485927/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#"
  645.           id="delete-post-8485927"
  646.           title="vote to undelete this post"
  647.           class="deleted-post"
  648.           data-delete-prompt="Vote to delete this post? (19 votes remaining)"
  649.           data-undelete-prompt="Vote to undelete this post? (23 votes remaining)">undelete</a><span class="lsep">|</span><a href="#"
  650.       class="flag-post-link"
  651.       title="flag this post for serious problems or moderator attention"
  652.       data-postid="8485927">flag</a></div>                <div class="deleted-answer-info">
  653.                 deleted <span title="2012-08-29 13:02:15Z" class="relativetime">Aug 29 '12 at 13:02</span>
  654.             </div>    </td>
  655.            
  656.  
  657.  
  658.     <td align="right" class="post-signature owner">  
  659.        
  660.  
  661.     <div class="user-info ">
  662.     <div class="user-action-time">
  663.         answered <span title="2011-12-13 07:56:56Z" class="relativetime">Dec 13 '11 at 7:56</span>
  664.     </div>
  665.     <div class="user-gravatar32">
  666.         <a href="/users/297765/jaredwilli"><div><img src="https://www.gravatar.com/avatar/ca85e937926a84231055f0adbaeac6c3?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></a>
  667.     </div>
  668.     <div class="user-details">
  669.         <a href="/users/297765/jaredwilli">jaredwilli</a><br>
  670.         <span class="reputation-score" title="reputation score " dir="ltr">1,529</span><span title="10 silver badges"><span class="badge2"></span><span class="badgecount">10</span></span><span title="17 bronze badges"><span class="badge3"></span><span class="badgecount">17</span></span>
  671.     </div>
  672. </div>
  673.     </td>
  674.     </tr>
  675.     </table>
  676. </td>        </tr>
  677.  
  678. <tr>
  679.     <td class="votecell"></td>
  680.     <td>
  681.         <div id="comments-8485927" class="comments dno" data-localized="true">
  682.             <table>
  683.                 <tbody data-remaining-comments-count="0"
  684.                        data-addlink-html="comments disabled on deleted / locked posts"
  685.                        data-addlink-disabled="true">
  686.                         <tr><td></td><td></td></tr>
  687.                 </tbody>
  688.             </table>
  689.         </div>
  690.             <a id="comments-link-8485927"
  691.                class="comments-link disabled-link"
  692.                title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”."
  693.                 >comments disabled on deleted / locked posts</a>
  694.     </td>
  695. </tr>
  696.     </table>
  697. </div>
  698.  
  699.  
  700. <a name="8431202"></a>
  701. <div id="answer-8431202" class="answer deleted-answer" data-answerid="8431202" >
  702.         <input type="hidden" id="8431202-only-allow-inform-moderator-flagging" value="true"/>
  703.     <table>
  704.         <tr>
  705.             <td class="votecell">
  706.                
  707.  
  708. <div class="vote">
  709.     <input type="hidden" name="_id_" value="8431202">
  710.     <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
  711.     <span class="vote-count-post ">1</span>
  712.     <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>
  713.    
  714.  
  715.  
  716. </div>
  717.  
  718.             </td>
  719.  
  720.  
  721.  
  722. <td class="answercell">
  723.     <div class="post-text"><p>Here are my tips</p>
  724.  
  725. <p>1) Use clearRect to clear the canvas instead of canvas.width=canvas.width, because later resets the canvas states</p>
  726.  
  727. <p>2) If you are using mouse events on the canvas use following function, its is reliable and works in most of the cases.</p>
  728.  
  729. <pre><code>/**  returns the xy point where the mouse event was occured.
  730.  @param ev The event object.
  731. */
  732. function getXY(ev){
  733.    return getMousePosition(ev, ev.srcElement || ev.originalTarget);
  734. }
  735.  
  736.  /**  returns the top-left point of the element
  737.        @param elem The element
  738.    */
  739. function getElementPos(elem){
  740.    var obj = elem;
  741.    var top = 0;
  742.    var left = 0;
  743.     while (obj &amp;&amp; obj.tagName != "BODY") {
  744.       top += obj.offsetTop-obj.scrollTop;
  745.       left += obj.offsetLeft -obj.scrollLeft ;
  746.       obj = obj.offsetParent;
  747.      }
  748.   return {
  749.     top: top,
  750.     left: left
  751.     };
  752. };
  753.  
  754. /**  returns the xy point where the mouse event was occured inside an element.
  755. @param ev The event object.
  756.  @param elem The element
  757. */
  758. function getMousePosition(evt, elem){
  759. var pageX, pageY;
  760. if(typeof(window.pageYOffset)=='number') {
  761.     pageX=window.pageXOffset;
  762.     pageY=window.pageYOffset;
  763. }else{
  764.     pageX=document.documentElement.scrollLeft;
  765.     pageY=document.documentElement.scrollTop;
  766. }
  767. var mouseX = evt.clientX - getElementPos(elem).left + pageX;
  768. var mouseY = evt.clientY - getElementPos(elem).top + pageY;
  769. return {
  770.     x: mouseX,
  771.     y: mouseY
  772. };
  773. };
  774. </code></pre>
  775.  
  776. <p>3) Use ExplorerCanvas if you want to support IE7</p>
  777.  
  778. <p>4) Instead of clearing the whole canvas clear only the part which is needed to be cleaned. Its good for performance.</p>
  779. </div>
  780.     <table class="fw">
  781.     <tr>
  782.     <td class="vt">
  783. <div class="post-menu"><a href="/a/8431202/508666" title="short permalink to this answer" class="short-link" id="link-post-8431202">share</a><span class="lsep">|</span><a href="/posts/8431202/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#"
  784.           id="delete-post-8431202"
  785.           title="vote to undelete this post"
  786.           class="deleted-post"
  787.           data-delete-prompt="Vote to delete this post? (19 votes remaining)"
  788.           data-undelete-prompt="Vote to undelete this post? (23 votes remaining)">undelete</a><span class="lsep">|</span><a href="#"
  789.       class="flag-post-link"
  790.       title="flag this post for serious problems or moderator attention"
  791.       data-postid="8431202">flag</a></div>                <div class="deleted-answer-info">
  792.                 deleted <span title="2012-08-29 13:02:15Z" class="relativetime">Aug 29 '12 at 13:02</span>
  793.             </div>    </td>
  794.     <td align="right" class="post-signature">
  795. <div class="user-info ">
  796.     <div class="user-action-time">
  797.         <a href="/posts/8431202/revisions" title="show all edits to this post">edited <span title="2011-12-10 07:35:32Z" class="relativetime">Dec 10 '11 at 7:35</span></a>
  798.     </div>
  799.     <div class="user-gravatar32">
  800.        
  801.     </div>
  802.     <div class="user-details">
  803.         <br>
  804.        
  805.     </div>
  806. </div>    </td>
  807.            
  808.  
  809.  
  810.     <td align="right" class="post-signature">  
  811.        
  812.  
  813.     <div class="user-info ">
  814.     <div class="user-action-time">
  815.         answered <span title="2011-12-08 12:47:17Z" class="relativetime">Dec 8 '11 at 12:47</span>
  816.     </div>
  817.     <div class="user-gravatar32">
  818.         <a href="/users/845859/shamaila-tahir"><div><img src="https://www.gravatar.com/avatar/aeaf766bb980ef5811a3ac43e88e188b?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></a>
  819.     </div>
  820.     <div class="user-details">
  821.         <a href="/users/845859/shamaila-tahir">Shamaila Tahir</a><br>
  822.         <span class="reputation-score" title="reputation score " dir="ltr">668</span><span title="5 silver badges"><span class="badge2"></span><span class="badgecount">5</span></span><span title="8 bronze badges"><span class="badge3"></span><span class="badgecount">8</span></span>
  823.     </div>
  824. </div>
  825.     </td>
  826.     </tr>
  827.     </table>
  828. </td>        </tr>
  829.  
  830. <tr>
  831.     <td class="votecell"></td>
  832.     <td>
  833.         <div id="comments-8431202" class="comments" data-localized="true">
  834.             <table>
  835.                 <tbody data-remaining-comments-count="0"
  836.                        data-addlink-html="comments disabled on deleted / locked posts"
  837.                        data-addlink-disabled="true">
  838.  
  839.     <tr id="comment-10441130" class="comment">
  840.         <td class="comment-actions">
  841.             <table>
  842.                 <tbody>
  843.                     <tr>
  844.                         <td class="comment-score">
  845.                            
  846.                         </td>
  847.                         <td>
  848.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  849.                         </td>
  850.                     </tr>
  851.                         <tr>
  852.                             <td>&nbsp;</td>
  853.                             <td>
  854.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  855.                             </td>
  856.                         </tr>
  857.                 </tbody>
  858.             </table>  
  859.         </td>
  860.         <td class="comment-text">
  861.             <div style="display: block;" class="comment-body">
  862.     <span class="comment-copy">Excanvas is a good library for supporting IE, but also another good one is Flashcanvas. I&#39;ve used both, the choice should depend on your needs for a project.</span>
  863.     &ndash;&nbsp;
  864.         <a href="/users/297765/jaredwilli"
  865.            title="1529 reputation"
  866.            class="comment-user owner">jaredwilli</a>
  867.     <span class="comment-date" dir="ltr"><span title="2011-12-09 14:53:33Z" class="relativetime-clean">Dec 9 '11 at 14:53</span></span>
  868.                 </div>
  869.  
  870.         </td>
  871.     </tr>
  872.     <tr id="comment-13120061" class="comment">
  873.         <td class="comment-actions">
  874.             <table>
  875.                 <tbody>
  876.                     <tr>
  877.                         <td class="comment-score">
  878.                            
  879.                         </td>
  880.                         <td>
  881.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  882.                         </td>
  883.                     </tr>
  884.                         <tr>
  885.                             <td>&nbsp;</td>
  886.                             <td>
  887.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  888.                             </td>
  889.                         </tr>
  890.                 </tbody>
  891.             </table>  
  892.         </td>
  893.         <td class="comment-text">
  894.             <div style="display: block;" class="comment-body">
  895.     <span class="comment-copy">I have noticed that Flashcanvas has better support of more things in Canvas, but one thing that I did run into is it&#39;s lack of support for doing things off screen in temporary canvases, and then using drawImage() to draw the temporary canvases into the main context. It is not able to do it unless those canvases are not off-screen.
  896. FxCanvas claims to have support for this, but I was not able to get it to work in the time period I had to try and get it working before a launch</span>
  897.     &ndash;&nbsp;
  898.         <a href="/users/297765/jaredwilli"
  899.            title="1529 reputation"
  900.            class="comment-user owner">jaredwilli</a>
  901.     <span class="comment-date" dir="ltr"><span title="2012-04-18 17:45:56Z" class="relativetime-clean">Apr 18 '12 at 17:45</span></span>
  902.                 </div>
  903.  
  904.         </td>
  905.     </tr>
  906.                 </tbody>
  907.             </table>
  908.         </div>
  909.             <a id="comments-link-8431202"
  910.                class="comments-link disabled-link"
  911.                title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”."
  912.                 >comments disabled on deleted / locked posts</a>
  913.     </td>
  914. </tr>
  915.     </table>
  916. </div>
  917.  
  918.  
  919. <a name="10382793"></a>
  920. <div id="answer-10382793" class="answer deleted-answer" data-answerid="10382793" >
  921.         <input type="hidden" id="10382793-only-allow-inform-moderator-flagging" value="true"/>
  922.     <table>
  923.         <tr>
  924.             <td class="votecell">
  925.                
  926.  
  927. <div class="vote">
  928.     <input type="hidden" name="_id_" value="10382793">
  929.     <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
  930.     <span class="vote-count-post ">1</span>
  931.     <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>
  932.    
  933.  
  934.  
  935. </div>
  936.  
  937.             </td>
  938.  
  939.  
  940.  
  941. <td class="answercell">
  942.     <div class="post-text"><p>After having worked on a <a href="http://apps.facebook.com/samsunggenomeproject/" rel="nofollow">recently launched Facebook app that uses Canvas</a> and users Facebook profile information (the amount of data it must accommodate is massive for some) to match you and friends of yours also using the app, to Olympic athletes like a 6 degrees of separation type of thing, there's quite a lot I have learned in my extensive efforts to do everything I could possibly try for increasing performance within the app.</p>
  943.  
  944. <p>I literally spent months, and days at a time just working to re-factor the code which I knew already so well, and believed it to be the most optimal way to do things.</p>
  945.  
  946. <h2>Use DOM Elements Whenever Possible</h2>
  947.  
  948. <p>The fact is, browsers are still just not ready to handle more intensive running applications in Canvas, especially if you're required to develop the app with support for IE 8. There are sometimes cases where the DOM is faster than the current implementation of the Canvas API at the time of writing this. <em>At least I've found it to be while working on a massively complex single page animating html5 and canvas application for Samsung.</em></p>
  949.  
  950. <p>We were able to do quite well at improving the performance of things while still using Canvas to do some complex work to crop images into circles, which would've probably been ok to stick with how we were doing it.</p>
  951.  
  952. <p>Days before the launch, we decided to try a different technique, and rather than create temporary canvases off-screen which were placed on the visible canvas once cropped into circles etc.., we just appended Image DOM elements on the Canvas, using the x and y coordinates that we had been using for placing the temp canvases before. </p>
  953.  
  954. <p>For cropping the images into circles, well that was simple, we just used the CSS3 border-radius property to do it which was far less work than the complex series of state changes and while ingenious and creative yet over-use of the .clip() method. </p>
  955.  
  956. <p>Once they are placed in the DOM, the animation of images the occurs, and the DOM nodes for each image are animated as separate entities of the Canvas. Ones that we can have full control over the styling off easily through CSS.</p>
  957.  
  958. <p>This technique is similar to another method for doing this type of work that is quite good to know as well, which involves layering Canvases on top of each other, rather than draw them to one context.</p>
  959. </div>
  960.     <table class="fw">
  961.     <tr>
  962.     <td class="vt">
  963. <div class="post-menu"><a href="/a/10382793/508666" title="short permalink to this answer" class="short-link" id="link-post-10382793">share</a><span class="lsep">|</span><a href="/posts/10382793/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#"
  964.           id="delete-post-10382793"
  965.           title="vote to undelete this post"
  966.           class="deleted-post"
  967.           data-delete-prompt="Vote to delete this post? (19 votes remaining)"
  968.           data-undelete-prompt="Vote to undelete this post? (23 votes remaining)">undelete</a><span class="lsep">|</span><a href="#"
  969.       class="flag-post-link"
  970.       title="flag this post for serious problems or moderator attention"
  971.       data-postid="10382793">flag</a></div>                <div class="deleted-answer-info">
  972.                 deleted <span title="2012-08-29 13:02:15Z" class="relativetime">Aug 29 '12 at 13:02</span>
  973.             </div>    </td>
  974.     <td align="right" class="post-signature">
  975. <div class="user-info ">
  976.     <div class="user-action-time">
  977.         <a href="/posts/10382793/revisions" title="show all edits to this post">edited <span title="2012-05-14 23:02:01Z" class="relativetime">May 14 '12 at 23:02</span></a>
  978.     </div>
  979.     <div class="user-gravatar32">
  980.        
  981.     </div>
  982.     <div class="user-details">
  983.         <br>
  984.        
  985.     </div>
  986. </div>    </td>
  987.            
  988.  
  989.  
  990.     <td align="right" class="post-signature owner">  
  991.        
  992.  
  993.     <div class="user-info ">
  994.     <div class="user-action-time">
  995.         answered <span title="2012-04-30 11:16:46Z" class="relativetime">Apr 30 '12 at 11:16</span>
  996.     </div>
  997.     <div class="user-gravatar32">
  998.         <a href="/users/297765/jaredwilli"><div><img src="https://www.gravatar.com/avatar/ca85e937926a84231055f0adbaeac6c3?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></a>
  999.     </div>
  1000.     <div class="user-details">
  1001.         <a href="/users/297765/jaredwilli">jaredwilli</a><br>
  1002.         <span class="reputation-score" title="reputation score " dir="ltr">1,529</span><span title="10 silver badges"><span class="badge2"></span><span class="badgecount">10</span></span><span title="17 bronze badges"><span class="badge3"></span><span class="badgecount">17</span></span>
  1003.     </div>
  1004. </div>
  1005.     </td>
  1006.     </tr>
  1007.     </table>
  1008. </td>        </tr>
  1009.  
  1010. <tr>
  1011.     <td class="votecell"></td>
  1012.     <td>
  1013.         <div id="comments-10382793" class="comments dno" data-localized="true">
  1014.             <table>
  1015.                 <tbody data-remaining-comments-count="0"
  1016.                        data-addlink-html="comments disabled on deleted / locked posts"
  1017.                        data-addlink-disabled="true">
  1018.                         <tr><td></td><td></td></tr>
  1019.                 </tbody>
  1020.             </table>
  1021.         </div>
  1022.             <a id="comments-link-10382793"
  1023.                class="comments-link disabled-link"
  1024.                title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”."
  1025.                 >comments disabled on deleted / locked posts</a>
  1026.     </td>
  1027. </tr>
  1028.     </table>
  1029. </div>
  1030.  
  1031.  
  1032. <a name="10384269"></a>
  1033. <div id="answer-10384269" class="answer deleted-answer" data-answerid="10384269" >
  1034.         <input type="hidden" id="10384269-only-allow-inform-moderator-flagging" value="true"/>
  1035.     <table>
  1036.         <tr>
  1037.             <td class="votecell">
  1038.                
  1039.  
  1040. <div class="vote">
  1041.     <input type="hidden" name="_id_" value="10384269">
  1042.     <a class="vote-up-off" title="This answer is useful (click again to undo)">up vote</a>
  1043.     <span class="vote-count-post ">1</span>
  1044.     <a class="vote-down-off" title="This answer is not useful (click again to undo)">down vote</a>
  1045.    
  1046.  
  1047.  
  1048. </div>
  1049.  
  1050.             </td>
  1051.  
  1052.  
  1053.  
  1054. <td class="answercell">
  1055.     <div class="post-text"><p>Here's some more tips and suggestions I put into a list last night worth sharing.</p>
  1056.  
  1057. <ul>
  1058. <li><p><strong>Don't include jQuery unless you need to do more than just selecting the <code>&lt;canvas&gt;</code>.</strong></p>
  1059.  
  1060. <p>I've managed to get by without it for almost everything I've made in canvas</p></li>
  1061. <li><p><strong><a href="http://en.wikipedia.org/wiki/Abstraction_%28computer_science%29" rel="nofollow">Create abstracted functions</a></strong> and <strong>decouple your code</strong>. Separate functionality from appearance or initial draw state. </p>
  1062.  
  1063. <p>Make common functions reusable as much as possible. Ideally, you should use a module pattern, which you can create a utils object that contains common functions.</p></li>
  1064. <li><p><strong>Use single and double letter variable names when it makes sense</strong> (<em>x, y, z</em>).</p>
  1065.  
  1066. <p>The coordinate system in Canvas adds more single letters that are
  1067. commonly declared as variables. Which can lead to creating multiple
  1068. single/double variables (<em>dX, dY, aX, aY, vX, vY</em>) as part of an element.</p>
  1069.  
  1070. <p>I suggest you type out or abbr. the word (<em>dirX, accelX, velX</em>) or be descriptive, otherwise things could get pretty confusing for you later on, trust me.</p></li>
  1071. <li><p>Create constructor functions which can be invoked as needed for making game elements. You can add custom methods and properties within the constructor, and create any number of you may need and they all will have their own properties and methods.</p>
  1072.  
  1073. <p><strong>Example of a Ball constructor function I made:</strong></p>
  1074.  
  1075. <pre><code>// Ball constructor
  1076. var Ball = function(x, y) {
  1077.     this.x = x;
  1078.     this.y = y;
  1079.  
  1080.     this.radius = 10;
  1081.     this.color = '#fff';
  1082.  
  1083.     // Direction and min, max x,y
  1084.     this.dX = 15;
  1085.     this.dY = -15;
  1086.  
  1087.     this.minX = this.minY = 20 + this.radius;
  1088.     this.maxX = this.radius - (canvasWidth - 20);
  1089.     this.maxY = this.radius + canvasHeight;
  1090.  
  1091.     this.draw = function(ctx) {
  1092.         ctx.beginPath();
  1093.             ctx.arc(this.x, this.y, this.radius, 0, twoPI, true);
  1094.         ctx.closePath();
  1095.         ctx.save();
  1096.             ctx.fillStyle = this.color;
  1097.             ctx.fill();
  1098.         ctx.restore();
  1099.     };
  1100. };
  1101. </code></pre></li>
  1102. </ul>
  1103.  
  1104. <p>Creating the Ball</p>
  1105.  
  1106. <pre><code>ball = new Ball(centerX, canvasHeight - paddle.height - 30);
  1107. ball.draw(ctx);
  1108. </code></pre>
  1109.  
  1110. <ul>
  1111. <li><p>A good base to work with is to create 3 functions:
  1112.     init() - do all the initial work, and setup the base vars and event handlers etc...
  1113.     draw() - called once to begin the game and draws the first frame of the game, including the creation of elements that may be changing or need constructing.
  1114.     update() - called at the end of draw() and within itself via requestAnimFrame. Updates properties of changing elements, only do what you need to do here.</p></li>
  1115. <li><p><strong>Do the least amount of work within the loop, making updates to the changing parts or elements</strong>. Create the game elements do any other UI work outside the animation loop. </p>
  1116.  
  1117. <p>The animation loop is often a recursive function, meaning it calls itself rapidly and repeatedly during the animation to draw each frame.</p>
  1118.  
  1119. <p>If there are many elements being animated at once, you might want to first create the elements using a constructor function if your not already, and then within the constructor make a 'timer' method that has requestAnimFrame/setTimeout using it just how you would normally within any animation loop, but effects this element specifically only.</p>
  1120.  
  1121. <p><strong>You could make each game element have it's own timer, draw, and animate methods</strong> in the constructor. </p>
  1122.  
  1123. <p>Doing this gives you full separation of control for each element and one big animation loop will not be necessary at all since the loop is broken up into each element and you start/stop at will.</p></li>
  1124. </ul>
  1125.  
  1126. <p>Or another option:</p>
  1127.  
  1128. <ul>
  1129. <li><strong>Create a Timer() constructor function</strong> which you can use and give each animating element individually, thereby minimizing work load within animation loops</li>
  1130. </ul>
  1131. </div>
  1132.     <table class="fw">
  1133.     <tr>
  1134.     <td class="vt">
  1135. <div class="post-menu"><a href="/a/10384269/508666" title="short permalink to this answer" class="short-link" id="link-post-10384269">share</a><span class="lsep">|</span><a href="/posts/10384269/edit" class="edit-post" title="revise and improve this post">edit</a><span class="lsep">|</span><a href="#"
  1136.           id="delete-post-10384269"
  1137.           title="vote to undelete this post"
  1138.           class="deleted-post"
  1139.           data-delete-prompt="Vote to delete this post? (19 votes remaining)"
  1140.           data-undelete-prompt="Vote to undelete this post? (23 votes remaining)">undelete</a><span class="lsep">|</span><a href="#"
  1141.       class="flag-post-link"
  1142.       title="flag this post for serious problems or moderator attention"
  1143.       data-postid="10384269">flag</a></div>                <div class="deleted-answer-info">
  1144.                 deleted <span title="2012-08-29 13:02:15Z" class="relativetime">Aug 29 '12 at 13:02</span>
  1145.             </div>    </td>
  1146.            
  1147.  
  1148.  
  1149.     <td align="right" class="post-signature owner">  
  1150.        
  1151.  
  1152.     <div class="user-info ">
  1153.     <div class="user-action-time">
  1154.         answered <span title="2012-04-30 13:10:21Z" class="relativetime">Apr 30 '12 at 13:10</span>
  1155.     </div>
  1156.     <div class="user-gravatar32">
  1157.         <a href="/users/297765/jaredwilli"><div><img src="https://www.gravatar.com/avatar/ca85e937926a84231055f0adbaeac6c3?s=32&d=identicon&r=PG" alt="" width="32" height="32"></div></a>
  1158.     </div>
  1159.     <div class="user-details">
  1160.         <a href="/users/297765/jaredwilli">jaredwilli</a><br>
  1161.         <span class="reputation-score" title="reputation score " dir="ltr">1,529</span><span title="10 silver badges"><span class="badge2"></span><span class="badgecount">10</span></span><span title="17 bronze badges"><span class="badge3"></span><span class="badgecount">17</span></span>
  1162.     </div>
  1163. </div>
  1164.     </td>
  1165.     </tr>
  1166.     </table>
  1167. </td>        </tr>
  1168.  
  1169. <tr>
  1170.     <td class="votecell"></td>
  1171.     <td>
  1172.         <div id="comments-10384269" class="comments" data-localized="true">
  1173.             <table>
  1174.                 <tbody data-remaining-comments-count="0"
  1175.                        data-addlink-html="comments disabled on deleted / locked posts"
  1176.                        data-addlink-disabled="true">
  1177.  
  1178.     <tr id="comment-13564125" class="comment">
  1179.         <td class="comment-actions">
  1180.             <table>
  1181.                 <tbody>
  1182.                     <tr>
  1183.                         <td class="comment-score">
  1184.                            
  1185.                                 <span title="number of &#39;useful comment&#39; votes received"
  1186.                                        class="cool">1</span>  
  1187.                         </td>
  1188.                         <td>
  1189.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  1190.                         </td>
  1191.                     </tr>
  1192.                         <tr>
  1193.                             <td>&nbsp;</td>
  1194.                             <td>
  1195.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  1196.                             </td>
  1197.                         </tr>
  1198.                 </tbody>
  1199.             </table>  
  1200.         </td>
  1201.         <td class="comment-text">
  1202.             <div style="display: block;" class="comment-body">
  1203.     <span class="comment-copy">Can you give some example code of what you stated above - of creating separate animate methods for separate animation objects ?</span>
  1204.     &ndash;&nbsp;
  1205.         <a href="/users/659074/mad-geek"
  1206.            title="1134 reputation"
  1207.            class="comment-user">mad.geek</a>
  1208.     <span class="comment-date" dir="ltr"><span title="2012-05-08 07:07:32Z" class="relativetime-clean">May 8 '12 at 7:07</span></span>
  1209.                 </div>
  1210.  
  1211.         </td>
  1212.     </tr>
  1213.     <tr id="comment-13694787" class="comment">
  1214.         <td class="comment-actions">
  1215.             <table>
  1216.                 <tbody>
  1217.                     <tr>
  1218.                         <td class="comment-score">
  1219.                            
  1220.                         </td>
  1221.                         <td>
  1222.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  1223.                         </td>
  1224.                     </tr>
  1225.                         <tr>
  1226.                             <td>&nbsp;</td>
  1227.                             <td>
  1228.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  1229.                             </td>
  1230.                         </tr>
  1231.                 </tbody>
  1232.             </table>  
  1233.         </td>
  1234.         <td class="comment-text">
  1235.             <div style="display: block;" class="comment-body">
  1236.     <span class="comment-copy">One way I have seen it implemented is by using an animations array to allow for per-animation intervals. This explains how you would do that: <a href="http://www.planetb.ca/2012/03/html5-game-programming-gems-requestanimationframe/" rel="nofollow">planetb.ca/2012/03/&hellip;</a>
  1237.  
  1238. The Adobe Illustrator to Canvas plugin from Visitmix actually has a much more involved and complex implementation of this technique for animating individual objects. You can see a demo of something which uses it is here: <a href="http://visitmix.com/labs/ai2canvas/common/tutorials/part09/export/Part%2009.html" rel="nofollow">visitmix.com/labs/ai2canvas/common/tutorials/part09/export/&hellip;</a></span>
  1239.     &ndash;&nbsp;
  1240.         <a href="/users/297765/jaredwilli"
  1241.            title="1529 reputation"
  1242.            class="comment-user owner">jaredwilli</a>
  1243.     <span class="comment-date" dir="ltr"><span title="2012-05-14 01:04:54Z" class="relativetime-clean">May 14 '12 at 1:04</span></span>
  1244.         <span class="edited-yes" title="this comment was edited 1 time"></span>
  1245.                 </div>
  1246.  
  1247.         </td>
  1248.     </tr>
  1249.     <tr id="comment-13694806" class="comment">
  1250.         <td class="comment-actions">
  1251.             <table>
  1252.                 <tbody>
  1253.                     <tr>
  1254.                         <td class="comment-score">
  1255.                            
  1256.                         </td>
  1257.                         <td>
  1258.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  1259.                         </td>
  1260.                     </tr>
  1261.                         <tr>
  1262.                             <td>&nbsp;</td>
  1263.                             <td>
  1264.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  1265.                             </td>
  1266.                         </tr>
  1267.                 </tbody>
  1268.             </table>  
  1269.         </td>
  1270.         <td class="comment-text">
  1271.             <div style="display: block;" class="comment-body">
  1272.     <span class="comment-copy">If you look into the source code of the visitmix animation you will find the constructor function called Clock, and subsequent prototypes of it which inherit and extend each new clock created for the different objects of the animation.</span>
  1273.     &ndash;&nbsp;
  1274.         <a href="/users/297765/jaredwilli"
  1275.            title="1529 reputation"
  1276.            class="comment-user owner">jaredwilli</a>
  1277.     <span class="comment-date" dir="ltr"><span title="2012-05-14 01:07:19Z" class="relativetime-clean">May 14 '12 at 1:07</span></span>
  1278.                 </div>
  1279.  
  1280.         </td>
  1281.     </tr>
  1282.     <tr id="comment-13694857" class="comment">
  1283.         <td class="comment-actions">
  1284.             <table>
  1285.                 <tbody>
  1286.                     <tr>
  1287.                         <td class="comment-score">
  1288.                            
  1289.                         </td>
  1290.                         <td>
  1291.                                     <a class="comment-up comment-up-off" title="this comment adds something useful to the post">upvote</a>
  1292.                         </td>
  1293.                     </tr>
  1294.                         <tr>
  1295.                             <td>&nbsp;</td>
  1296.                             <td>
  1297.                                     <a class="comment-flag" title="flag this comment as unconstructive, offensive, or spam">flag</a>
  1298.                             </td>
  1299.                         </tr>
  1300.                 </tbody>
  1301.             </table>  
  1302.         </td>
  1303.         <td class="comment-text">
  1304.             <div style="display: block;" class="comment-body">
  1305.     <span class="comment-copy">One other possible technique which I&#39;ve been working on creating involves the use of constructor functions which are used to create the element(s) you need, which you can create a method which controls &#39;this&#39; elements&#39; clock timer for it&#39;s own animation.</span>
  1306.     &ndash;&nbsp;
  1307.         <a href="/users/297765/jaredwilli"
  1308.            title="1529 reputation"
  1309.            class="comment-user owner">jaredwilli</a>
  1310.     <span class="comment-date" dir="ltr"><span title="2012-05-14 01:13:44Z" class="relativetime-clean">May 14 '12 at 1:13</span></span>
  1311.                 </div>
  1312.  
  1313.         </td>
  1314.     </tr>
  1315.                 </tbody>
  1316.             </table>
  1317.         </div>
  1318.             <a id="comments-link-10384269"
  1319.                class="comments-link disabled-link"
  1320.                title="Use comments to ask for more information or suggest improvements. Avoid comments like “+1” or “thanks”."
  1321.                 >comments disabled on deleted / locked posts</a>
  1322.     </td>
  1323. </tr>
  1324.     </table>
  1325. </div>
  1326. <div class="pager-answers">
  1327.        
  1328.  
  1329.  
  1330.  
  1331.  
  1332.  
  1333.     </div>             
  1334.                     <script type="text/javascript">
  1335.                         StackExchange.using("inlineEditing", function () {
  1336.                             StackExchange.inlineEditing.init();
  1337.                         });
  1338.                     </script>
  1339.  
  1340.  
  1341.                         <h2 class="bottom-notice">
  1342. Not the answer you&#39;re looking for?                          Browse other questions tagged <a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a> <a href="/questions/tagged/performance" class="post-tag" title="show questions tagged &#39;performance&#39;" rel="tag">performance</a> <a href="/questions/tagged/optimization" class="post-tag" title="show questions tagged &#39;optimization&#39;" rel="tag">optimization</a> <a href="/questions/tagged/canvas" class="post-tag" title="show questions tagged &#39;canvas&#39;" rel="tag">canvas</a>  or <a href="/questions/ask">ask your own question</a>.                      </h2>
  1343.             </div>
  1344.         </div>
  1345.                 <div id="sidebar" class="show-votes">
  1346.                             <div class="module question-stats">
  1347.                     <p class="label-key">tagged</p>
  1348.                     <div class="tagged"><a href="/questions/tagged/javascript" class="post-tag" title="show questions tagged &#39;javascript&#39;" rel="tag">javascript</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">&times;</span>&nbsp;<span class="item-multiplier-count">495836</span></span><br>
  1349. <a href="/questions/tagged/performance" class="post-tag" title="show questions tagged &#39;performance&#39;" rel="tag">performance</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">&times;</span>&nbsp;<span class="item-multiplier-count">37652</span></span><br>
  1350. <a href="/questions/tagged/optimization" class="post-tag" title="show questions tagged &#39;optimization&#39;" rel="tag">optimization</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">&times;</span>&nbsp;<span class="item-multiplier-count">12735</span></span><br>
  1351. <a href="/questions/tagged/canvas" class="post-tag" title="show questions tagged &#39;canvas&#39;" rel="tag">canvas</a>&nbsp;<span class="item-multiplier"><span class="item-multiplier-x">&times;</span>&nbsp;<span class="item-multiplier-count">10810</span></span><br>
  1352. </div>
  1353.                     <table id="qinfo">
  1354.                         <tr>
  1355.                             <td>
  1356.                                 <p class="label-key">asked</p>
  1357.                             </td>
  1358.                             <td style="padding-left: 10px">
  1359.                                 <p class="label-key" title="2011-11-20 23:56:59Z"><b>2 years ago</b></p>
  1360.                             </td>
  1361.                         </tr>
  1362.                         <tr>
  1363.                             <td>
  1364.                                 <p class="label-key">viewed</p>
  1365.                             </td>
  1366.  
  1367.                             <td style="padding-left: 10px">
  1368.                                 <p class="label-key">
  1369.                                     <b>2867 times</b>
  1370.                                 </p>
  1371.                             </td>
  1372.                         </tr>
  1373.                             <tr>
  1374.                                 <td>
  1375.                                     <p class="label-key">active</p>
  1376.                                 </td>
  1377.                                 <td style="padding-left: 10px">
  1378.                                     <p class="label-key"><b><a href="?lastactivity" class="lastactivity-link" title="2012-07-29 20:11:57Z">1 year ago</a></b></p>
  1379.                                 </td>
  1380.                             </tr>
  1381.                     </table>
  1382.                 </div>
  1383.             <div class="module community-bulletin" data-tracker="cb=1">
  1384.     <h4>Community Bulletin</h4>
  1385.     <div class="related">
  1386.  
  1387.             <div class="spacer">
  1388.                 <div class="bulletin-item-type"><a href="http://blog.stackoverflow.com" class="event-date" target="_blank">blog</a></div>
  1389.                 <div class="bulletin-item-content">
  1390.                     <a href="http://blog.stackoverflow.com/2013/12/a-new-top-bar-for-stack-exchange/" class="question-hyperlink" target="_blank">A New Top Bar for Stack Exchange</a>
  1391.                 </div>
  1392.                 <br class="cbt" />
  1393.             </div>
  1394.     </div>
  1395. </div>         
  1396.             <script type="text/javascript">
  1397.                 var ados = ados || {};ados.run = ados.run || [];
  1398.                 ados.run.push(function() { ados_add_placement(22,8277,"adzerk1617541667",17).setZone(45) ; });                    
  1399.             </script>
  1400.             <div class="everyonelovesstackoverflow" id="adzerk1617541667">
  1401.             </div>  
  1402.     <div id="hireme">
  1403.         <script type="text/javascript">
  1404. window.careers_adurl="//careers.stackoverflow.com/gethired/js",window.careers_cssurl="//cdn-careers.sstatic.net/careers/gethired/sidebar.min.css?v=3c55a7a05afd",window.careers_leaderboardcssurl="//cdn-careers.sstatic.net/careers/gethired/ninja.min.css?v=78ccbfa5c59f",window.careers_companycssurl="//cdn-careers.sstatic.net/careers/gethired/company",window.careers_adselector="div.hireme, div#hireme",StackExchange.ready(function(){$.ajax({url:"//cdn-careers.sstatic.net/careers/gethired/loader.min.js?v=de73430809b3",dataType:"script",cache:!0})});        </script>
  1405.     </div>
  1406.              
  1407.    
  1408.             <div class="module sidebar-linked">
  1409.     <h4 id="h-linked">Linked</h4>
  1410.     <div class="linked" data-tracker="lq=1">
  1411. <div class="spacer">
  1412.     <a href="/q/3488441" title="Vote score (upvotes - downvotes)">
  1413.         <div class="answer-votes  default">9</div>
  1414.     </a>
  1415.     <a href="/questions/3488441/html5-canvas-performance-loading-images-vs-drawing" class="question-hyperlink">HTML5 Canvas Performance: Loading Images vs Drawing</a>
  1416. </div><div class="spacer">
  1417.     <a href="/q/11150779" title="Vote score (upvotes - downvotes)">
  1418.         <div class="answer-votes answered-accepted default">2</div>
  1419.     </a>
  1420.     <a href="/questions/11150779/redrawing-html5-canvas-incredibly-slow" class="question-hyperlink">Redrawing HTML5 canvas incredibly slow</a>
  1421. </div><div class="spacer">
  1422.     <a href="/q/2662321" title="Vote score (upvotes - downvotes)">
  1423.         <div class="answer-votes answered-accepted default">4</div>
  1424.     </a>
  1425.     <a href="/questions/2662321/html-5-canvas-performance" class="question-hyperlink">HTML 5 Canvas performance</a>
  1426. </div><div class="spacer">
  1427.     <a href="/q/4209465" title="Vote score (upvotes - downvotes)">
  1428.         <div class="answer-votes answered-accepted default">3</div>
  1429.     </a>
  1430.     <a href="/questions/4209465/javascript-canvas-html5-performance-questions" class="question-hyperlink">javascript canvas html5 performance questions</a>
  1431. </div><div class="spacer">
  1432.     <a href="/q/6986843" title="Vote score (upvotes - downvotes)">
  1433.         <div class="answer-votes  default">1</div>
  1434.     </a>
  1435.     <a href="/questions/6986843/how-to-properly-render-a-html5-canvas-game-with-best-performance-results" class="question-hyperlink">How to properly render a html5 canvas game with best performance results</a>
  1436. </div><div class="spacer">
  1437.     <a href="/q/11047954" title="Vote score (upvotes - downvotes)">
  1438.         <div class="answer-votes  default">2</div>
  1439.     </a>
  1440.     <a href="/questions/11047954/html5-canvas-optimization-for-a-processingjs-visualization" class="question-hyperlink">HTML5 Canvas optimization for a processingjs visualization</a>
  1441. </div>          </div>
  1442. </div>
  1443.  
  1444.                 <div class="module sidebar-related">
  1445.                     <h4 id="h-related">Related</h4>
  1446.                     <div class="related" data-tracker="rq=1">
  1447.                         <div class="spacer">
  1448. <a href="/q/3630594" title="Vote score (upvotes - downvotes)">
  1449.     <div class="answer-votes answered-accepted default">13
  1450.     </div>
  1451. </a><a href="/questions/3630594/html5-canvas-transformation-matrix" class="question-hyperlink">HTML5 Canvas Transformation Matrix</a>
  1452. </div>
  1453. <div class="spacer">
  1454. <a href="/q/3970461" title="Vote score (upvotes - downvotes)">
  1455.     <div class="answer-votes default">4
  1456.     </div>
  1457. </a><a href="/questions/3970461/html-canvas-drawimage-performance-with-another-canvas" class="question-hyperlink">HTML/Canvas - drawImage performance with another canvas</a>
  1458. </div>
  1459. <div class="spacer">
  1460. <a href="/q/5801116" title="Vote score (upvotes - downvotes)">
  1461.     <div class="answer-votes answered-accepted default">9
  1462.     </div>
  1463. </a><a href="/questions/5801116/how-to-use-html5-canvas-clip" class="question-hyperlink">How to use HTML5 &lt;canvas&gt; clip()</a>
  1464. </div>
  1465. <div class="spacer">
  1466. <a href="/q/8506018" title="Vote score (upvotes - downvotes)">
  1467.     <div class="answer-votes answered-accepted default">0
  1468.     </div>
  1469. </a><a href="/questions/8506018/html5-canvas-in-jquery-array-syntax" class="question-hyperlink">html5 canvas in jquery array syntax</a>
  1470. </div>
  1471. <div class="spacer">
  1472. <a href="/q/8578213" title="Vote score (upvotes - downvotes)">
  1473.     <div class="answer-votes default">0
  1474.     </div>
  1475. </a><a href="/questions/8578213/jquery-html5-canvas-change-color-variable" class="question-hyperlink">Jquery html5 canvas change color variable</a>
  1476. </div>
  1477. <div class="spacer">
  1478. <a href="/q/12565850" title="Vote score (upvotes - downvotes)">
  1479.     <div class="answer-votes default">0
  1480.     </div>
  1481. </a><a href="/questions/12565850/how-to-optimize-drawing-a-lot-elements-on-canvas-js" class="question-hyperlink">How to optimize drawing a lot elements on canvas JS?</a>
  1482. </div>
  1483. <div class="spacer">
  1484. <a href="/q/12597696" title="Vote score (upvotes - downvotes)">
  1485.     <div class="answer-votes answered-accepted default">0
  1486.     </div>
  1487. </a><a href="/questions/12597696/how-to-divide-a-circle-into-three-equal-parts-with-html5-canvas" class="question-hyperlink">How to divide a circle into three equal parts with HTML5 canvas?</a>
  1488. </div>
  1489. <div class="spacer">
  1490. <a href="/q/16684127" title="Vote score (upvotes - downvotes)">
  1491.     <div class="answer-votes answered-accepted default">1
  1492.     </div>
  1493. </a><a href="/questions/16684127/understanding-html5-canvas-element" class="question-hyperlink">Understanding HTML5 Canvas Element</a>
  1494. </div>
  1495. <div class="spacer">
  1496. <a href="/q/17001360" title="Vote score (upvotes - downvotes)">
  1497.     <div class="answer-votes answered-accepted default">0
  1498.     </div>
  1499. </a><a href="/questions/17001360/can-i-plot-html5-canvas-x-y-points-programatically-using-jquery-with-external-js" class="question-hyperlink">Can I plot HTML5 Canvas x/y points programatically using jQuery with external JSON data?</a>
  1500. </div>
  1501.  
  1502.                     </div>
  1503.                 </div>
  1504.         </div>
  1505.         <script type="text/javascript">
  1506. StackExchange.ready(function(){$.get('/posts/8205828/ivc/812e');});
  1507. </script>
  1508. <noscript>
  1509.     <div><img src="/posts/8205828/ivc/812e" class="dno" alt="" width="0" height="0"></div>
  1510. </noscript><div style="display:none" id="prettify-lang">default</div></div>
  1511.  
  1512.  
  1513.         </div>
  1514.     </div>
  1515.     <div id="footer" class="categories">
  1516.         <div class="footerwrap">
  1517.             <div id="footer-menu">
  1518.                 <div class="top-footer-links">
  1519.                         <a href="/about">about</a>
  1520.                     <a href="/help">help</a>
  1521.                     <a href="http://blog.stackexchange.com?blb=1">blog</a>
  1522.                         <a href="http://chat.stackoverflow.com">chat</a>
  1523.                     <a href="http://data.stackexchange.com">data</a>
  1524.                     <a href="http://stackexchange.com/legal">legal</a>
  1525.                     <a href="http://stackexchange.com/legal/privacy-policy">privacy policy</a>
  1526.                     <a href="http://stackexchange.com/about/hiring">jobs</a>
  1527.                     <a href="http://engine.adzerk.net/r?e=eyJhdiI6NDE0LCJhdCI6MjAsImNtIjo5NTQsImNoIjoxMTc4LCJjciI6Mjc3NiwiZG0iOjQsImZjIjoyODYyLCJmbCI6Mjc1MSwibnciOjIyLCJydiI6MCwicHIiOjExNSwic3QiOjAsInVyIjoiaHR0cDovL3N0YWNrb3ZlcmZsb3cuY29tL2Fib3V0L2NvbnRhY3QiLCJyZSI6MX0&amp;s=hRods5B22XvRBwWIwtIMekcyNF8">advertising info</a>
  1528.  
  1529.                     <a onclick='StackExchange.switchMobile("on", "/questions/8205828/html5-canvas-performance-and-optimization-tips-tricks-and-coding-best-practices")'>mobile</a>
  1530.                     <b><a href="/contact">contact us</a></b>
  1531.                         <b><a href="http://meta.stackoverflow.com">feedback</a></b>
  1532.                    
  1533.                 </div>
  1534.                 <div id="footer-sites">
  1535.                     <table>
  1536.     <tr>
  1537.             <th colspan=3>
  1538.                 Technology
  1539.             </th>
  1540.             <th >
  1541.                 Life / Arts
  1542.             </th>
  1543.             <th >
  1544.                 Culture / Recreation
  1545.             </th>
  1546.             <th >
  1547.                 Science
  1548.             </th>
  1549.             <th >
  1550.                 Other
  1551.             </th>
  1552.     </tr>
  1553.     <tr>
  1554.             <td>
  1555.                 <ol>
  1556.                         <li><a href="http://stackoverflow.com" title="professional and enthusiast programmers">Stack Overflow</a></li>
  1557.                         <li><a href="http://serverfault.com" title="professional system and network administrators">Server Fault</a></li>
  1558.                         <li><a href="http://superuser.com" title="computer enthusiasts and power users">Super User</a></li>
  1559.                         <li><a href="http://webapps.stackexchange.com" title="power users of web applications">Web Applications</a></li>
  1560.                         <li><a href="http://askubuntu.com" title="Ubuntu users and developers">Ask Ubuntu</a></li>
  1561.                         <li><a href="http://webmasters.stackexchange.com" title="pro webmasters">Webmasters</a></li>
  1562.                         <li><a href="http://gamedev.stackexchange.com" title="professional and independent game developers">Game Development</a></li>
  1563.                         <li><a href="http://tex.stackexchange.com" title="users of TeX, LaTeX, ConTeXt, and related typesetting systems">TeX - LaTeX</a></li>
  1564.                             </ol></td><td><ol>
  1565.                         <li><a href="http://programmers.stackexchange.com" title="professional programmers interested in conceptual questions about software development">Programmers</a></li>
  1566.                         <li><a href="http://unix.stackexchange.com" title="users of Linux, FreeBSD and other Un*x-like operating systems.">Unix &amp; Linux</a></li>
  1567.                         <li><a href="http://apple.stackexchange.com" title="power users of Apple hardware and software">Ask Different (Apple)</a></li>
  1568.                         <li><a href="http://wordpress.stackexchange.com" title="WordPress developers and administrators">WordPress Answers</a></li>
  1569.                         <li><a href="http://gis.stackexchange.com" title="cartographers, geographers and GIS professionals">Geographic Information Systems</a></li>
  1570.                         <li><a href="http://electronics.stackexchange.com" title="electronics and electrical engineering professionals, students, and enthusiasts">Electrical Engineering</a></li>
  1571.                         <li><a href="http://android.stackexchange.com" title="enthusiasts and power users of the Android operating system">Android Enthusiasts</a></li>
  1572.                         <li><a href="http://security.stackexchange.com" title="Information security professionals">Information Security</a></li>
  1573.                             </ol></td><td><ol>
  1574.                         <li><a href="http://dba.stackexchange.com" title="database professionals who wish to improve their database skills and learn from others in the community">Database Administrators</a></li>
  1575.                         <li><a href="http://drupal.stackexchange.com" title="Drupal developers and administrators">Drupal Answers</a></li>
  1576.                         <li><a href="http://sharepoint.stackexchange.com" title="SharePoint enthusiasts">SharePoint</a></li>
  1577.                         <li><a href="http://ux.stackexchange.com" title="user experience researchers and experts">User Experience</a></li>
  1578.                         <li><a href="http://mathematica.stackexchange.com" title="users of Mathematica">Mathematica</a></li>
  1579.                    
  1580.                         <li>
  1581.                             <a href="http://stackexchange.com/sites#technology" class="more">
  1582.                                 more (14)
  1583.                             </a>
  1584.                         </li>
  1585.                 </ol>
  1586.             </td>
  1587.             <td>
  1588.                 <ol>
  1589.                         <li><a href="http://photo.stackexchange.com" title="professional, enthusiast and amateur photographers">Photography</a></li>
  1590.                         <li><a href="http://scifi.stackexchange.com" title="science fiction and fantasy enthusiasts">Science Fiction &amp; Fantasy</a></li>
  1591.                         <li><a href="http://cooking.stackexchange.com" title="professional and amateur chefs">Seasoned Advice (cooking)</a></li>
  1592.                         <li><a href="http://diy.stackexchange.com" title="contractors and serious DIYers">Home Improvement</a></li>
  1593.                    
  1594.                         <li>
  1595.                             <a href="http://stackexchange.com/sites#lifearts" class="more">
  1596.                                 more (13)
  1597.                             </a>
  1598.                         </li>
  1599.                 </ol>
  1600.             </td>
  1601.             <td>
  1602.                 <ol>
  1603.                         <li><a href="http://english.stackexchange.com" title="linguists, etymologists, and serious English language enthusiasts">English Language &amp; Usage</a></li>
  1604.                         <li><a href="http://skeptics.stackexchange.com" title="scientific skepticism">Skeptics</a></li>
  1605.                         <li><a href="http://judaism.stackexchange.com" title="those who base their lives on Jewish law and tradition and anyone interested in learning more">Mi Yodeya (Judaism)</a></li>
  1606.                         <li><a href="http://travel.stackexchange.com" title="road warriors and seasoned travelers">Travel</a></li>
  1607.                         <li><a href="http://christianity.stackexchange.com" title="committed Christians, experts in Christianity and those interested in learning more">Christianity</a></li>
  1608.                         <li><a href="http://gaming.stackexchange.com" title="passionate videogamers on all platforms">Arqade (gaming)</a></li>
  1609.                         <li><a href="http://bicycles.stackexchange.com" title="people who build and repair bicycles, people who train cycling, or commute on bicycles">Bicycles</a></li>
  1610.                         <li><a href="http://rpg.stackexchange.com" title="gamemasters and players of tabletop, paper-and-pencil role-playing games">Role-playing Games</a></li>
  1611.                    
  1612.                         <li>
  1613.                             <a href="http://stackexchange.com/sites#culturerecreation" class="more">
  1614.                                 more (21)
  1615.                             </a>
  1616.                         </li>
  1617.                 </ol>
  1618.             </td>
  1619.             <td>
  1620.                 <ol>
  1621.                         <li><a href="http://math.stackexchange.com" title="people studying math at any level and professionals in related fields">Mathematics</a></li>
  1622.                         <li><a href="http://stats.stackexchange.com" title="statisticians, data analysts, data miners and data visualization experts">Cross Validated (stats)</a></li>
  1623.                         <li><a href="http://cstheory.stackexchange.com" title="theoretical computer scientists and researchers in related fields">Theoretical Computer Science</a></li>
  1624.                         <li><a href="http://physics.stackexchange.com" title="active researchers, academics and students of physics">Physics</a></li>
  1625.                         <li><a href="http://mathoverflow.net" title="professional mathematicians">MathOverflow</a></li>
  1626.                    
  1627.                         <li>
  1628.                             <a href="http://stackexchange.com/sites#science" class="more">
  1629.                                 more (7)
  1630.                             </a>
  1631.                         </li>
  1632.                 </ol>
  1633.             </td>
  1634.             <td>
  1635.                 <ol>
  1636.                         <li><a href="http://stackapps.com" title="apps, scripts, and development with the Stack Exchange API">Stack Apps</a></li>
  1637.                         <li><a href="http://meta.stackoverflow.com" title="meta-discussion of the Stack Exchange family of Q&amp;A websites">Meta Stack Overflow</a></li>
  1638.                         <li><a href="http://area51.stackexchange.com" title="proposing new sites in the Stack Exchange network">Area 51</a></li>
  1639.                         <li><a href="http://careers.stackoverflow.com">Stack Overflow Careers</a></li>
  1640.                    
  1641.                 </ol>
  1642.             </td>
  1643.     </tr>
  1644. </table>
  1645.                 </div>
  1646.             </div>
  1647.  
  1648.             <div id="copyright">
  1649.                 site design / logo &#169; 2013 stack exchange inc; user contributions licensed under <a href="http://creativecommons.org/licenses/by-sa/3.0/" rel="license">cc-wiki</a>
  1650.  with <a href="http://blog.stackoverflow.com/2009/06/attribution-required/" rel="license">attribution required</a>
  1651.             </div>
  1652.             <div id="footer-flair">
  1653.                 <a href="http://creativecommons.org/licenses/by-sa/3.0/" class="cc-wiki-link"></a>
  1654.             </div>
  1655.             <div id="svnrev">
  1656.                 rev 2013.12.5.1201
  1657.             </div>
  1658.            
  1659.         </div>
  1660.     </div>
  1661.     <noscript>
  1662.         <div id="noscript-warning">Stack Overflow works best with JavaScript enabled<img src="http://pixel.quantserve.com/pixel/p-c1rF4kxgLUzNc.gif" alt="" class="dno"></div>
  1663.     </noscript>
  1664. <script type="text/javascript">var p = "http", d = "static"; if (document.location.protocol == "https:") { p += "s"; d = "engine"; } var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = p + "://" + d + ".adzerk.net/ados.js"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
  1665. <script type="text/javascript">
  1666.     var ados = ados || {};
  1667.     ados.run = ados.run || [];
  1668.     ados.run.push(function () { ados_setKeywords('javascript,performance,optimization,canvas,x-user-registered,x-user-highrep');; ados_load(); });        
  1669. </script>
  1670.  
  1671.     <script type="text/javascript">var _gaq=_gaq||[];_gaq.push(['_setAccount','UA-5620270-1']);
  1672.         _gaq.push(['_setCustomVar', 1, 'tags', '|javascript|performance|optimization|canvas|']);
  1673.         _gaq.push(['_setCustomVar', 2, 'accountid', '239224',2]);
  1674. _gaq.push(['_trackPageview']);
  1675.     var _qevents = _qevents || [];
  1676.     var _comscore = _comscore || [];
  1677.     (function () {
  1678.         var ssl='https:'==document.location.protocol,
  1679.             s=document.getElementsByTagName('script')[0],
  1680.             ga=document.createElement('script');
  1681.         ga.type='text/javascript';
  1682.         ga.async=true;
  1683.         ga.src=(ssl?'https://ssl':'http://www')+'.google-analytics.com/ga.js';
  1684.         s.parentNode.insertBefore(ga,s);
  1685.         var sc=document.createElement('script');
  1686.         sc.type='text/javascript';
  1687.         sc.async=true;
  1688.         sc.src=(ssl?'https://secure':'http://edge')+'.quantserve.com/quant.js';
  1689.         s.parentNode.insertBefore(sc, s);
  1690.        
  1691.         var s = document.createElement("script"), el = document.getElementsByTagName("script")[0]; s.async = true;
  1692.         s.src = (document.location.protocol == "https:" ? "https://sb" : "http://b") + ".scorecardresearch.com/beacon.js";
  1693.         el.parentNode.insertBefore(s, el);
  1694.        
  1695.     })();
  1696.     _comscore.push({ c1: "2", c2: "17440561" });
  1697.     _qevents.push({ qacct: "p-c1rF4kxgLUzNc" });
  1698.     </script>            
  1699. </body>
  1700. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!