---
title: Optimizing canvas
slug: Web/API/Canvas_API/Tutorial/Optimizing_canvas
translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas
original_slug: Web/Guide/HTML/Canvas_tutorial/Optimizing_canvas
---
<p>{{HTMLElement("canvas")}} es uno de los estándares más utilizados para la representación de gráficos 2D en la Web. Se utiliza ampliamente en los juegos y visualizaciones complejas. Sin embargo, as Web sites and apps push canvas to the limits, el rendimiento comienza a sufrir. <span class="seoSummary">This article aims to provide suggestions for optimizing your use of the canvas element, to ensure that your Web site or app performs well.</span></p>
<p>A continuación una lista de tips par mejorar el rendimiento:</p>
<ul>
 <li>Repintar primitives similares o objetos repetidos dentro y fuera de la pantalla canvas.</li>
 <li>Batch canvas calls together (for example, draw a poly-line instead of multiple separate lines).</li>
 <li>Avoid floating-point coordinates and use integers instead.</li>
 <li>Avoid unnecessary canvas state changes.</li>
 <li>Render screen differences only, not the whole new state.</li>
 <li>Utilice varios lienzos en capas para escenas complejas.</li>
 <li>Evite la propiedad <code>shadowBlur</code> siempre que sea posible.</li>
 <li>Con las animaciones, use {{domxref("window.requestAnimationFrame()")}}.</li>
 <li>Probar el rendimiento con <a href="http://jsperf.com">JSPerf</a>.</li>
</ul>
<p>{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_animations")}}</p>