Тепер давайте поговоримо про мобільні пристрої та оптимізацію. Немає мобільної версії Canvas, є просто Canvas. Один і той же API для десктопних та мобільних пристроїв. Мобільним пристроям іноді не вистачає можливостей і вони, як правило, повільніші; але те саме можна сказати і про старі комп'ютери і браузери. Тому, коли ви робите додаток на Canvas, важливо врахувати продуктивність і різні способи оптимізації коду. малюйте менше.
Не малюйте приховані штуки. Якщо у вас є чотири екрани інформації, але тільки один видно за раз, не малюйте інші.
Використовуйте зображення замість фігур. Якщо у вас є графіка, яка ніколи не змінюватиметься або масштабуватиметься, то розгляньте переклад малювання у зображення, використовуючи щось на зразок Фотошопу. У цілому нині зображення малюються набагато швидше на екрані, ніж векторна графіка. Це особливо помітно, якщо у вас є графіка, яка перемальовується кілька разів, як спрайт у грі.
Кешуйте за допомогою полотна за екраном. Під час роботи ви можете створити новий екземпляр полотна, який не видно на екрані, і його можна використовувати як кеш. Коли ваша програма починає малювати графіку в закадрове полотно, то просто скопіюйте її і намалюйте знову. Це дасть вам таку ж швидкість, що й використання зображень замість фігур, але ви створюєте ці зображення в процесі і можете потенційно змінити їх у разі потреби.
Розтягуйте зображення. Оскільки ми вже використовуємо зображення для безлічі речей, зважте на ефект їх розтягування. У Canvas реалізований добре оптимізований код для масштабування та кадрування зображень, так що це має відбуватися досить швидко. Існує також кілька версій drawImage, які дозволяють малювати фрагменти зображення. За допомогою цих API ви можете робити розумні штуки, такі як кешування купи спрайтів в одному зображенні або дике розтягування зображень для старомодних ефектів. Залежно від вашої програми можна перемалювати лише частину екрана. Наприклад, у мене є м'яч, що стрибає. Мені не потрібно прати і перемалювати все тло. Натомість я просто перемалюю там, де м'яч зараз і де він був на попередньому кадрі. Для деяких програм це дає велике прискорення.
Малюйте менше кадрів. Тепер, коли ви малюєте менше, спробуйте зробити менше кадрів. Щоб отримати плавну анімацію ви, можливо, захочете задіяти 100 кадрів на секунду, але у більшості комп'ютерів максимальна швидкість оновлення екрана становить 60 кадрів на секунду. Тому немає сенсу малювати більше кадрів, тому що користувач ніколи їх не побачить. Як ви синхронізуєтеся з оновленням екрана? Mozilla і WebKit містять експериментальні API, які надсилають запит браузеру викликати код під час наступного оновлення екрана. Це замінить ваш виклик setInterval або setTimeout. Тепер браузер відповідає за наявну частоту кадрів і він гарантує, що ви не перейдете 60 кадрів в сек. Браузер також може робити розумні речі, як зниження частоти кадрів, якщо користувач переходить на іншу вкладку. Мобільні браузери починають втілювати це, так що фонові програми заощаджують термін служби батареї. Якщо у вас є статичний фон, який потім переміщається за межі полотна і малюється заново, використовуйте зображення в браузері. Ви можете зробити тло полотна прозорим, щоб через нього все було видно. Якщо у вас великі зображення, ви можете змусити їх рухатися швидше і плавніше за допомогою переходів CSS, а не робити це в полотні через JavaScript. Загалом переходи CSS будуть швидшими, тому що вони реалізовані на Сі, а не JavaScript, але ваш досвід може бути іншим, так що тестувати і тестувати. Chrome та Mozilla містять чудові інструменти, які допоможуть вам з налагодженням та тестуванням коду JavaScript.
Вирівнюйте малюнки у спрайтах. Остання порада — з деякими зображеннями та фігурами малювання відбувається швидше, якщо вони вирівняні за межами пікселів. Деякі тести показують двох і триразове прискорення на полотні в iPad, якщо малюнки у ваших спрайтах вирівняні.