<canvas> es un elementoHTML el cual puede ser usado para dibujar gráficos usando scripts (normalmenteJavaScript). Este puede, por ejemplo, ser usado para dibujar gráficos, realizar composición de fotos o simples (yno tan simples) animaciones.

<canvas> fue introducido primero por Apple para el Mac OS X Dashboard y después implementado en Safari y Google Chrome. Navegadores basados enGecko 1.8, tal como Firefox 1.5, que también soportan este elemento. El<canvas> es un elemento parte de las especificaciones de laWhatWG Web applications 1.0 mejor conocida como HTML5.

En este tutorial se describe cómo usar el elemento<canvas> para dibujar gráficos en 2D, empezando con lo básico. Los ejemplos le proveerán mayor claridad a las ideas que pueda tener referentes al canvas, así como los códigos que necesita para crear su propio contenido.

Antes de Empezar

Usar el elemento<canvas> no es algo muy díficil pero necesita saber y entender los aspectos básicos delHTML yJavaScript. El elemento<canvas> no está soportado en navegadores viejos, pero están soportado en la mayoría de las versiones más recientes de los navegadores. El tamaño por defecto del canvas es 300px * 150px [ancho (width) * alto (height)]. Pero se puede personalizar el tamaño usando las propiedades height y width de CSS. Con el fin de dibujar gráficos en el lienzo <canvas> se utiliza un objeto de contexto de JavaScript que crea gráficos sobre la marcha.

En este Tutorial

• Usos Básicos
• Dibujando Formas
• Usando Imágenes
• Aplicando estilos y colores
• Transformaciones
• Composiciones
• Animaciones Básicas
• Optimización de Canvas

Vea también

• Canvas topic page
• Drawing Graphics with Canvas
• Canvas examples
• HTML5 Tutorial
• Drawing Text Using a Canvas
• Adding Text to Canvas
• Canvas Demos - Games, applications, tools and tutorials
• Canvas Drawing and Animation Application
• Interactive canvas tutorial
• Canvas Cheat Sheet with all attributes and methods
• Adobe Illustrator to Canvas plug-in
• HTML5CanvasTutorials
• How to draw N grade Bézier curves with the Canvas API
• 31 days of canvas tutorials
• W3C Standard
• HTML5 Canvas tutorials and reference
• JavaScript Canvas Image Conversion

Nota a los contribuyentes

Debido a un desafortunado error técnico que ocurrió el 17 de junio del 2013, perdimos la historia de este tutorial, incluyendo atribuciones a todos los contribuyentes del pasado a su contenido. Pedimos disculpas por esto, y esperamos que perdone este desafortunado percance.

• Siguiente