Ниже приведён сборник советов по улучшению производительности canvas.

Если вы повторяете одни и те же операции рисования в каждом кадре анимации, рассмотрите возможность их выгрузки на offscreen canvas. Затем вы можете визуализировать закадровое изображение на свой основной canvas так часто, как это необходимо, без необходимости повторять шаги, необходимые для его генерации.

myCanvas.offscreenCanvas = document.createElement("canvas");myCanvas.offscreenCanvas.width = myCanvas.width;myCanvas.offscreenCanvas.height = myCanvas.height;myCanvas.getContext("2d").drawImage(myCanvas.offScreenCanvas, 0, 0);

Субпиксельный рендеринг происходит при рендеринге объектов на canvas без целых значений.

ctx.drawImage(myImage, 0.3, 0.5);

Это заставляет браузер выполнять дополнительные вычисления для создания эффекта сглаживания. Чтобы избежать этого, обязательно округлите все координаты, используемые в вызовахdrawImage(), например, с помощьюMath.floor().

При загрузке кешируйте изображения разных размеров на offscreen canvas, а не постоянно масштабируйте их вdrawImage().

Вы можете обнаружить, что некоторые объекты в вашем приложении нужно часто перемещать или менять, в то время как другие остаются относительно статичными. Возможной оптимизацией в этой ситуации является наложение ваших элементов с использованием нескольких элементов<canvas>.

Например, допустим, у вас есть игра с пользовательским интерфейсом наверху, геймплеем в середине и статическим фоном внизу. В этом случае вы можете разбить свою игру на три слоя<canvas>. Пользовательский интерфейс будет меняться только при изменении пользователем, слой с игровым процессом будет меняться с каждым новым кадром, а фон останется в основном неизменным.

<div>  <canvas width="480" height="320"></canvas>  <canvas width="480" height="320"></canvas>  <canvas width="480" height="320"></canvas></div><style>  #stage {    width: 480px;    height: 320px;    position: relative;    border: 2px solid black;  }  canvas {    position: absolute;  }  #ui-layer {    z-index: 3;  }  #game-layer {    z-index: 2;  }  #background-layer {    z-index: 1;  }</style>

Если у вас есть статическое фоновое изображение, вы можете нарисовать его на простом элементе<div>, используя свойство CSSbackground, и расположить его под canvas. Это сведёт на нет необходимость рендеринга фона на canvas на каждом тике.

CSS-преобразования быстрее, поскольку они используют графический процессор. В идеале, не стоит не масштабировать canvas, или можно использовать меньший canvas и увеличивать его при необходимости, но не уменьшать.

var scaleX = window.innerWidth / canvas.width;var scaleY = window.innerHeight / canvas.height;var scaleToFit = Math.min(scaleX, scaleY);var scaleToCover = Math.max(scaleX, scaleY);stage.style.transformOrigin = "0 0"; //scale from top leftstage.style.transform = "scale(" + scaleToFit + ")";

Если ваше приложение использует canvas и не нуждается в прозрачном фоне, установите для параметраalpha значениеfalse при создании контекста рисования с помощьюHTMLCanvasElement.getContext(). Эта информация может использоваться браузером для оптимизации рендеринга.

var ctx = canvas.getContext("2d", { alpha: false });

• Объединяйте запросы к canvas. Например, рисуйте одну ломанную линию вместо нескольких отдельных линий.
• Избегайте ненужных изменений состояния canvas.
• Отображайте только изменения экрана, а не заново перерисовывайте.
• По возможности избегайте свойстваshadowBlur.
• Избегайтерендеринга текста, когда это возможно.
• Попробуйте разные способы очистки canvas ((clearRect(), илиfillRect(), или изменение размера canvas).
• С анимациями используйтеwindow.requestAnimationFrame() вместоwindow.setInterval().
• Будьте осторожны с тяжёлыми физическими библиотеками.

• Improving HTML5 Canvas Performance – HTML5 Rocks
• Optimizing your JavaScript game for Firefox OS – Mozilla Hacks