initial commit

3 files changed, 390 insertions, 0 deletions

diff --git a/files/es/web/html/canvas/a_basic_ray-caster/index.html b/files/es/web/html/canvas/a_basic_ray-caster/index.html
new file mode 100644
index 0000000000..7917541554
--- /dev/null
+++ b/files/es/web/html/canvas/a_basic_ray-caster/index.html
@@ -0,0 +1,59 @@
+---
+title: A basic ray-caster
+slug: Web/HTML/Canvas/A_basic_ray-caster
+tags:
+  - Avanzado
+  - Canvas
+  - Ejemplo
+  - Espanol(2)
+  - Gráficos(2)
+  - HTML
+  - Necesita traducción
+  - Web
+translation_of: Web/API/Canvas_API/A_basic_ray-caster
+---
+<div>{{CanvasSidebar}}</div>
+
+<div class="summary">
+<p>Este artículo proporciona un interesante ejemplo de la vida real usando el elemento {{HTMLElement("canvas")}} para renderizar un sencillo entorno 3D usando una técnica de render llamada ray-casting.</p>
+</div>
+
+<p>{{EmbedGHLiveSample("canvas-raycaster/index.html", 900, 300)}}</p>
+
+<p><strong><a href="http://mdn.github.io/canvas-raycaster/">Abrir en una nueva ventana</a></strong></p>
+
+<h2 id="Why.3F" name="Why.3F">¿Por qué?</h2>
+
+<p> </p>
+
+<p>Después de darme cuenta, para mi satisfacción, de que el ingenioso elemento &lt;canvas&gt; sobre el que había estado leyendo, no sólo iba a recibir soporte por parte de Firefox, sino que <strong>ya estaba</strong> soportado por la versión actual de Safari, así que tenía que ponerme manos a la obra y hacer un pequeño experimento.</p>
+
+<p>El <a href="https://developer.mozilla.org/en-US/docs/Canvas_tutorial">tutorial</a> y el <a href="https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API">resumen</a> que encontré en la MDN son geniales, pero nadie había escrito nada (todavía) sobre animación, así que pensé que sería una buena oportunidad para portar un sencillo raycaster en el que había trabajado hacía tiempo y comprobar qué tipo de rendimiento podía esperar de un buffer de pixeles controlado por JavaScript.</p>
+
+<h2 id="How.3F" name="How.3F">¿Cómo?</h2>
+
+<p>La idea es sencilla, usar {{domxref("WindowTimers.setInterval","setInterval()")}} con un retraso arbitrario que se corresponde con la velocidad de fotogramas deseada. Por cada llamada al intervalo se ejecutará una función que volverá a pintar el elemento &lt;canvas&gt;  en el que se muestra la vista actual del usuario. Sé que podría haber empezado con un ejemplo más simple, pero creo que el <a href="/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations">tutorial</a> sobre &lt;canvas&gt; vale para eso, y quería ver si podía hacer esto.</p>
+
+<p>Continuemos, por cada actualización, el raycaster comprueba si has presionado alguna tecla, si no has presionado ninguna se mantendrán los cálculos para ahorrar tiempo de ejecución. Si se ha presionado alguna tecla, el &lt;canvas&gt; es borrado, el suelo y el cielo son pintados, la posición y la orientación de la cámara son actualizados, y los rayos son lanzados. Según van intersectando los rayos con las paredes se van pintando líneas verticales de pared del color de la pared con la que han colisionado, mezcladas con una versión más oscura del color en función de la distancia a la que se encuentra la pared. La altura de la línea vertical depende directamente de la distancia a la que el rayo es interesectado, dibujándose centrada con respecto la línea del horizonte.</p>
+
+<p>El código que he terminado usando es una amalgama regurgitada del código que aparece en los capítulos sobre raycasting del libro de André LaMothe <em>Tricks of the Game Programming Gurus</em> y una <a class="external" href="http://www.shinelife.co.uk/java-maze/">versión en java de un raycaster</a> que encontré online, a su vez pasado por el filtro de mi pulsión a renombrar todo para que tenga sentido para mí y todo el chapuceo necesario para que las cosas funcionen bien.</p>
+
+<h2 id="Results" name="Results">Resultados</h2>
+
+<p>El &lt;canvas&gt; en Safari 2.0.1 rindió sorprendentemente bien. Renderizando columnas de 8 pixeles de ancho, puedo correr una ventana de 320 x 240 a 24 FPS en mi Apple Mini. Firefox 1.5 Beta 1 es incluso más rápido; puedo correr una ventana de 320 x 240 a 24 FPS con columnas de 4 píxeles de ancho. No es exactamente un nuevo miembro de la familia de ID Software, pero es bastante decente teniendo en cuenta que es un entorno completamente interpretado, y que no me he tenido que preocupar de reservar memoria, ni modos de vídeo o escribir rutinas en ensamblador. Aún así el código intenta ser lo más eficiente posible, usando tablas de acceso rápido para valores precalculados, pero no soy ningún gurú de la optimización, así que seguramente haya varias cosas que se puedan escribir más rápido.</p>
+
+<p>Además, deja bastante que desear en términos de intentar convertir esto en un motor de juego - no hay texturas en las paredes, no hay sprites, no hay puertas, ni siquiera hay teletransportadores que te permitan ir a otro nivel. Pero tengo bastante confianza en que todas esas cosas se podrían añadir con el suficiente tiempo disponible. La API de canvas soporta copiado de píxeles de imágenes, así que tener texturas parece bastante factible. Dejaré esto para otro artículo, seguramente para otra persona. =)</p>
+
+<h2 id="The_RayCaster" name="The_RayCaster">El ray-caster</h2>
+
+<p>El gente tan maravillosa que hay aquí han copiado manualmente mis archivos así vosotros podéis echarle un <a href="http://mdn.github.io/canvas-raycaster/">vistazo</a>, y para vuestro disfrute he puesto los archivos individuales como listados de código (ver abajo).</p>
+
+<p>¡Así que aquí lo tenéis, arrancad Safari 1.3+ o Firefox 1.5+ o cualquier otro navegador que soporte el elemento <code>&lt;canvas&gt;</code> y a disfrutar!<br>
+ <br>
+ <small><a href="https://github.com/mdn/canvas-raycaster/blob/master/input.js">input.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Level.js">Level.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/Player.js">Player.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/index.html">RayCaster.html</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/RayCaster.js">RayCaster.js</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.css">trace.css</a> | <a href="https://github.com/mdn/canvas-raycaster/blob/master/trace.js">trace.js</a> </small></p>
+
+<h2 id="See_also" name="See_also">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Canvas_API/Tutorial">Tutorial de canvas</a></li>
+</ul>
diff --git a/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html
new file mode 100644
index 0000000000..9331174e6d
--- /dev/null
+++ b/files/es/web/html/canvas/drawing_graphics_with_canvas/index.html
@@ -0,0 +1,161 @@
+---
+title: Dibujando gráficos con canvas
+slug: Web/HTML/Canvas/Drawing_graphics_with_canvas
+translation_of: Web/API/Canvas_API/Tutorial
+---
+<div class="note">
+ <p>Most of this content (but not the documentation on drawWindow) has been rolled into the more expansive <a href="/en-US/docs/HTML/Canvas/Tutorial" title="HTML/Canvas/tutorial">Canvas tutorial</a>, this page should probably be redirected there as it's now redundant but some information may still be relevant.</p>
+</div>
+<h2 id="Introduction" name="Introduction">Introduction</h2>
+<p>Firefox 1.5, incluye un nuevo elemento HTML para gráficos programables.   &lt;canvas&gt; está basado en la especificación de canvas WHATWG, la que a su vez está basada en el &lt;canvas&gt; de Apple, implementado en Safari.   Puede ser usado para la renderización de gráficos, elementos de Interfaz de usuarios, y otros gráficos personalizados en el cliente.</p>
+<p>La etiqueta &lt;canvas&gt; crea una superficie de dibujo de tamaño fijo que expone uno o más contextos de renderizado.   Nos enfocaremos en la representación del contexto 2D   Para gráficos 3D, podrías usar la <a href="/es-ES/docs/WebGL">representación del contexto WebGL</a></p>
+<h2 id="The_2D_Rendering_Context" name="The_2D_Rendering_Context">El contexto de representación 2D</h2>
+<h3 id="A_Simple_Example" name="A_Simple_Example">Un ejemplo sencillo</h3>
+<p>Para comenzar, aquí un sencillo ejemplo que dibuja dos rectángulos interesándose, uno de los cuales tiene transparencia alfa.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "rgb(200,0,0)";
+  ctx.fillRect (10, 10, 55, 50);
+
+  ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
+  ctx.fillRect (30, 30, 55, 50);
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="120" height="120"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_Simple_Example','150','150','/@api/deki/files/602/=Canvas_ex1.png')}}</p>
+<p>La funcion draw obtiene el elemento canvas, entonces obtiene el contexto 2D.   El objeto ctx puede entonces actualmente ser renderizado para el canvas   El ejemplo simplemente llena dos rectangulos, configurando fillStyle a dos diferentes colores utilizando las especificaciones de color de CSS y llamando a fillRect   El segundo FillStyle usa rgba() para especificar un valor alpha junto con el color.</p>
+<p>El fillRect, strokeRect, y clearRect llama a render a ser llenado, bosquejado o limpiar rectangulo.   Para representar formas más complejas, se usan trayectorias.  </p>
+<h3 id="Using_Paths" name="Using_Paths">Usando trayectorias</h3>
+<p>La funcion Path inicia un nuevo trazo, y move to, line to, arc to, arc, y metodos similares son usados para agregar segmentos al trazo.   La trayectoria puede ser cerrada usando closePath   Una vez la trayectoria es creada, puedes usar fill o stroke para representar la trayectoria en el canvas.</p>
+<pre class="brush: js">function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  ctx.fillStyle = "red";
+
+  ctx.beginPath();
+  ctx.moveTo(30, 30);
+  ctx.lineTo(150, 150);
+  // was: ctx.quadraticCurveTo(60, 70, 70, 150); which is wrong.
+  ctx.bezierCurveTo(60, 70, 60, 70, 70, 150); // &lt;- this is right formula for the image on the right -&gt;
+  ctx.lineTo(30, 30);
+  ctx.fill();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="160" height="160"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('Using_Paths','190','190','/@api/deki/files/603/=Canvas_ex2.png')}}</p>
+<p>Llamando fill() o stroke() causa que el trazo sea usado.   Para ser llenado o juntado otra vez, el trazo debe ser recreado.</p>
+<h3 id="Graphics_State" name="Graphics_State">Estado de gráficos</h3>
+<p>Los atributos del contexto como fillStyle, strokeStyle, lineWidth, y lineJoin son parte de actual estado de graficos   El contexto provee dos metodos, save() y restore(), que pueden ser usados para mover el actual estado y desde estado stack.</p>
+<h3 id="A_More_Complicated_Example" name="A_More_Complicated_Example">Un ejemplo más complicado</h3>
+<p>Hay aquì un ejemplo más complicado, que usa rutas,estado y tambien introduce la actual matriz de transformación.   Los metodos de contexto translate(), scale(), y rotate() todos transforman la matriz actual.   Todos los puntos renderizados son primero transformados por esta matriz.</p>
+<pre class="brush: js">function drawBowtie(ctx, fillStyle) {
+
+  ctx.fillStyle = "rgba(200,200,200,0.3)";
+  ctx.fillRect(-30, -30, 60, 60);
+
+  ctx.fillStyle = fillStyle;
+  ctx.globalAlpha = 1.0;
+  ctx.beginPath();
+  ctx.moveTo(25, 25);
+  ctx.lineTo(-25, -25);
+  ctx.lineTo(25, -25);
+  ctx.lineTo(-25, 25);
+  ctx.closePath();
+  ctx.fill();
+}
+
+function dot(ctx) {
+  ctx.save();
+  ctx.fillStyle = "yellow";
+  ctx.fillRect(-2, -2, 4, 4);
+  ctx.restore();
+}
+
+function draw() {
+  var ctx = document.getElementById('canvas').getContext('2d');
+
+  // note that all other translates are relative to this one
+  ctx.translate(45, 45);
+
+  ctx.save();
+  //ctx.translate(0, 0); // unnecessary
+  drawBowtie(ctx, "red");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 0);
+  ctx.rotate(45 * Math.PI / 180);
+  drawBowtie(ctx, "green");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(0, 85);
+  ctx.rotate(135 * Math.PI / 180);
+  drawBowtie(ctx, "blue");
+  dot(ctx);
+  ctx.restore();
+
+  ctx.save();
+  ctx.translate(85, 85);
+  ctx.rotate(90 * Math.PI / 180);
+  drawBowtie(ctx, "yellow");
+  dot(ctx);
+  ctx.restore();
+}
+</pre>
+<div class="hidden">
+ <pre class="brush: html">&lt;canvas id="canvas" width="185" height="185"&gt;&lt;/canvas&gt;</pre>
+ <pre class="brush: js">draw();</pre>
+</div>
+<p>{{EmbedLiveSample('A_More_Complicated_Example','215','215','/@api/deki/files/604/=Canvas_ex3.png')}}</p>
+<p>Esto define dos métodos, lazo y punto, que son llamados 4 veces.   Antes de cada llamada, los metodos translate() y rotate() son utilizados para la matriz de transformación actual, que a su vez posicionara el punto y el lazo.   el punto presenta un pequeño cuadrado negro centrado a (0,0).   Ese punto se mueve alrededor de la matriz de transformación.   El lazo presenta un simple ruta de lazo usando el estillo de llenado pasado.</p>
+<p>Como las operaciones de la matriz son acumulativas, save() y restore() son utilizados para cada conjunto de llamadas para restaurar el estado de canvas original.   Una cosa a tener en cuenta es que la rotación siempre se produce en torno al origen actual, por lo que a traducir () rotate () translate () secuencia producirá resultados diferentes a traducir () translate () serie de llamadas rotate ().</p>
+<h2 id="Compatibility_With_Apple_.3Ccanvas.3E" name="Compatibility_With_Apple_.3Ccanvas.3E">Compatibilidad con Apple &lt;canvas&gt;</h2>
+<p>En su mayor parte, &lt;canvas&gt; es compatible con Apple y otras implementaciones.   Hay, sin embargo, algunas cuestiones a tener en cuenta, que se describen aquí.</p>
+<h3 id="Required_.3C.2Fcanvas.3E_tag" name="Required_.3C.2Fcanvas.3E_tag">Etiqueta &lt;/canvas&gt; requerida </h3>
+<p>En la aplicación de Apple Safari, &lt;canvas&gt; es un elemento ejecutado de la misma manera &lt;img&gt; es, sino que no tiene una etiqueta de cierre.   Sin embargo, para &lt;canvas&gt; tener uso generalizado en la web, se debe proporcionar alguna facilidad para contenido de reserva.   Por lo tanto, la implementación de Mozilla tiene una etiqueta de cierre requerida.</p>
+<p>Si no se necesita contenido de reserva, un simple &lt;canvas id="foo" ...&gt; &lt;/ canvas&gt; será totalmente compatible con Safari y Mozilla - Safari simplemente ignorar la etiqueta de cierre.</p>
+<p>Si se desea contenido de reserva, algunos trucos CSS se deben emplear para enmascarar el contenido de reserva desde Safari (las cuales deben emitir sólo la tela), y también para enmascarar los propios trucos CSS de IE (que debería hacer que el contenido de reserva).</p>
+<pre>canvas {
+  font-size: 0.00001px !ie;
+}</pre>
+<h2 id="Additional_Features" name="Additional_Features">Caracteristicas adicionales  </h2>
+<h3 id="Rendering_Web_Content_Into_A_Canvas" name="Rendering_Web_Content_Into_A_Canvas">Renderizando el contenido we dentro de un Canvas.</h3>
+<div class="note">
+ Esta caracteristica esta solo disponible para codigo ejecutado con privilegios de Chrome.   No esta permitido en paginas HTML normales. <a href="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352" title="http://mxr.mozilla.org/mozilla/source/content/canvas/src/nsCanvasRenderingContext2D.cpp#2352">Porqué leer</a>.</div>
+<p>El canvas de Mozilla se extendio con el metodo drawWindow().   Este metodo dibuja una instantanea de los contenidos de una ventana DOM dentro del canvas. Por ejemplo:</p>
+<pre class="brush: js">ctx.drawWindow(window, 0, 0, 100, 200, "rgb(255,255,255)");
+</pre>
+<p>atraería el contenido de la ventana actual, en el rectángulo (0,0,100,200) en píxeles con respecto a la parte superior izquierda de la ventana, sobre un fondo blanco, en el lienzo.   Mediante la especificación de "rgba (255,255,255,0)" como el color, el contenido no se dibujan con un fondo transparente (lo que sería más lenta).</p>
+<p>Normalmente es una mala idea usar un fondo distinto de blanco "rgb(255, 255, 255)" o transparente, esto es lo que hacen todos los navegadores, y muchos sitios web esperan que esas partes transparentes de su interfaz serán puestas en fondo blanco.</p>
+<p>Con este metodo, es posible ocupar un IFRAME oculto con contenido arbitrario (por ejemplo, texto HTML con estilo CSS, o SVG) y dibujarlo dentro de un canvas.   sera escalado, rotado y sucesivamente de acuerdo a la transformación actual.</p>
+<p>Extensión de previsualización pestaña de Ted Mielczarek utiliza esta técnica en cromo para proporcionar imágenes en miniatura de las páginas web, y la fuente está disponible para su referencia.  </p>
+<div class="note">
+ Nota: usar canvas.drawWindow() mientras manejamos un evento de carga de documento, no trabaja   En Firefox 3.5 o superior, puedes hacer esto en un manejador para el evento MozAfterPaint para dibujr satisfactoriamente un contenido HTML dentro de un canvas al cargar la pagina  </div>
+<h2 id="See_also" name="See_also">See also</h2>
+<ul>
+ <li><a href="/en-US/docs/HTML/Canvas" title="HTML/Canvas">Canvas topic page</a></li>
+ <li><a href="/en-US/docs/Canvas_tutorial" title="Canvas_tutorial">Canvas tutorial</a></li>
+ <li><a href="http://www.whatwg.org/specs/web-apps/current-work/#the-canvas">WHATWG specification</a></li>
+ <li><a href="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html" title="http://developer.apple.com/documentation/AppleApplications/Conceptual/SafariJSProgTopics/Tasks/Canvas.html">Apple Canvas Documentation</a></li>
+ <li><a href="http://weblogs.mozillazine.org/roc/archives/2005/05/rendering_web_p.html">Rendering Web Page Thumbnails</a></li>
+ <li>Some <a href="/en-US/docs/tag/canvas_examples">examples</a>:
+  <ul>
+   <li><a href="http://azarask.in/projects/algorithm-ink">Algorithm Ink</a></li>
+   <li><a href="http://www.tapper-ware.net/canvas3d/">OBJ format 3D Renderer</a></li>
+   <li><a href="/en-US/docs/A_Basic_RayCaster" title="A_Basic_RayCaster">A Basic RayCaster</a></li>
+   <li><a href="http://awordlike.textdriven.com/">The Lightweight Visual Thesaurus</a></li>
+   <li><a href="http://caimansys.com/painter/">Canvas Painter</a></li>
+  </ul>
+ </li>
+ <li><a href="/en-US/docs/tag/canvas">And more...</a></li>
+</ul>
diff --git a/files/es/web/html/canvas/index.html b/files/es/web/html/canvas/index.html
new file mode 100644
index 0000000000..dfdde2bf63
--- /dev/null
+++ b/files/es/web/html/canvas/index.html
@@ -0,0 +1,170 @@
+---
+title: API Canvas
+slug: Web/HTML/Canvas
+tags:
+  - API
+  - Canvas
+  - JavaScript
+  - Referencia
+  - introducción
+translation_of: Web/API/Canvas_API
+---
+<div>{{CanvasSidebar}}</div>
+
+<p class="summary">Añadido en <a href="/es/docs/HTML/HTML5">HTML5</a>, el <strong>elemento HTML {{HTMLElement("canvas")}}</strong> se puede usar para dibujar gráficos mediante scripting en <a href="/es/docs/Web/JavaScript">JavaScript</a>. Por ejemplo, se puede usar para hacer gráficas, composiciones fotográficas, crear animaciones, o incluso procesado o renderizado de vídeo en tiempo real.</p>
+
+<p>Las aplicaciones de Mozilla soportan <code>&lt;canvas&gt;</code> desde Gecko 1.8 (es decir, <a href="/es/docs/Mozilla/Firefox/Releases/1.5">Firefox 1.5</a>). El elemento fue inicialmenmte presentado por Apple para el Dashboard de OS X y Safari. Internet Explorer soporta <code>&lt;canvas&gt;</code> desde la versión 9 en adelante; para versiones anteriores de IE, se puede añadir soporte para <code>&lt;canvas&gt;</code> a una página incluyendo un script del proyecto de Google <a href="https://github.com/arv/explorercanvas">Explorer Canvas</a>. Google Chrome y Opera 9 también soportan <code>&lt;canvas&gt;</code>.</p>
+
+<p>El elemento <code>&lt;canvas&gt;</code> también se usa en <a href="/es/docs/Web/WebGL">WebGL</a> para dibujar gráficos 3D con aceleración por hardware en páginas web.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Esto es un trozo de código que usa el método {{domxref("CanvasRenderingContext2D.fillRect()")}}.</p>
+
+<h3 id="HTML">HTML</h3>
+
+<pre class="brush: html">&lt;canvas id="canvas"&gt;&lt;/canvas&gt;
+</pre>
+
+<h3 id="JavaScript">JavaScript</h3>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext('2d');
+
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);
+</pre>
+
+<p>Edita este código para ver tus cambios en tiempo real en este canvas:</p>
+
+<div class="hidden">
+<h6 id="Código_editable">Código editable</h6>
+
+<pre class="brush: html">&lt;canvas id="canvas" width="400" height="200" class="playable-canvas"&gt;&lt;/canvas&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+ctx.fillStyle = 'green';
+ctx.fillRect(10, 10, 100, 100);&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js">var canvas = document.getElementById('canvas');
+var ctx = canvas.getContext("2d");
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function drawCanvas() {
+  ctx.clearRect(0, 0, canvas.width, canvas.height);
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  drawCanvas();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', drawCanvas);
+window.addEventListener('load', drawCanvas);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Código_editable', 700, 360) }}</p>
+
+<h2 id="Referencia">Referencia</h2>
+
+<div class="index">
+<ul>
+ <li>{{domxref("HTMLCanvasElement")}}</li>
+ <li>{{domxref("CanvasRenderingContext2D")}}</li>
+ <li>{{domxref("CanvasGradient")}}</li>
+ <li>{{domxref("CanvasImageSource")}}</li>
+ <li>{{domxref("CanvasPattern")}}</li>
+ <li>{{domxref("ImageBitmap")}}</li>
+ <li>{{domxref("ImageData")}}</li>
+ <li>{{domxref("RenderingContext")}}</li>
+ <li>{{domxref("TextMetrics")}}</li>
+ <li>{{domxref("OffscreenCanvas")}}{{experimental_inline}}</li>
+ <li>{{domxref("Path2D")}} {{experimental_inline}}{{domxref("ImageBitmapRenderingContext")}}{{experimental_inline}}</li>
+</ul>
+</div>
+
+<p>Las interfaces relacionadas con <code>WebGLRenderingContext</code> están en <a href="/es/docs/Web/WebGL" title="/en-US/docs/Web/WebGL">WebGL</a>.</p>
+
+<p>{{domxref("CanvasCaptureMediaStream")}} está relacionado..</p>
+
+<h2 id="Guías_y_tutoriales">Guías y tutoriales</h2>
+
+<dl>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Tutorial">Tutorial Canvas</a></dt>
+ <dd>Tutorial exhaustivo que cubre tanto el uso básico de <code>&lt;canvas&gt;</code> como sus características avanzadas.</dd>
+ <dt><a href="/es/Add-ons/Code_snippets/Canvas">Fragmentos de código: Canvas</a></dt>
+ <dd>Algunos fragmentos de código orientados al desarrollador de extensiones usando <code>&lt;canvas&gt;</code>.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/A_basic_ray-caster">Demo: Un laberinto básico</a></dt>
+ <dd>Una demo de una animación de laberinto usando canvas.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Drawing_DOM_objects_into_a_canvas">Dibujar objetos DOM en un canvas</a></dt>
+ <dd>Cómo dibujar contenido DOM, como elementos HTML, en un canvas.</dd>
+ <dt><a href="/es/docs/Web/API/Canvas_API/Manipulating_video_using_canvas">Manipulación de vídeo usando canvas</a></dt>
+ <dd>Combinando {{HTMLElement("video")}} y {{HTMLElement("canvas")}} para manipular datos de vídeo en tiempo real.</dd>
+</dl>
+
+<h2 id="Recursos">Recursos</h2>
+
+<h3 id="Genéricos">Genéricos</h3>
+
+<ul>
+ <li><a href="http://joshondesign.com/p/books/canvasdeepdive/title.html">Profundizando en HTML5 Canvas</a></li>
+ <li><a href="http://bucephalus.org/text/CanvasHandbook/CanvasHandbook.html">Manual de Canvas</a></li>
+</ul>
+
+<h3 id="Librerías">Librerías</h3>
+
+<ul>
+ <li><a href="http://fabricjs.com">Fabric.js</a> es una librería open-source para canvas con capacidad de parsear SVG.</li>
+ <li><a href="https://github.com/ericdrowell/KineticJS">Kinetic.js</a> es una librería open-source de canvas enfocada en la interactividad para aplicaciones móviles y de escritorio.</li>
+ <li><a href="http://paperjs.org/">Paper.js</a> es un framework para gráficos vectoriales open source que funciona sobre Canvas HTML5.</li>
+ <li><a href="http://origamijs.com/docs/">Origami.js</a> es una librería ligera open-source para canvas.</li>
+ <li><a href="http://libcanvas.github.com/">libCanvas</a> es un framework ligero y potente para canvas.</li>
+ <li><a href="http://processingjs.org">Processing.js</a> es un port de PVL (Processing visualization language).</li>
+ <li><a href="https://playcanvas.com/">PlayCanvas</a> es un motor open source de juegos.</li>
+ <li><a href="http://www.pixijs.com/">Pixi.js</a> es un motor open source de juegos.</li>
+ <li><a href="http://www.liquidx.net/plotkit/">PlotKit</a> es una librería para hacer gráficas.</li>
+ <li><a class="link-https" href="https://github.com/jeremyckahn/rekapi">Rekapi</a> es una API para animación por frames para Canvas.</li>
+ <li><a href="http://senchalabs.github.com/philogl/">PhiloGL</a> es un framework WebGL para visualización de datos, programación creativa y desarrollo de juegos.</li>
+ <li><a href="http://thejit.org/">JavaScript InfoVis Toolkit</a> crea visualizaciones de datos 2D interactivas para Web.</li>
+ <li><a href="http://www.createjs.com/easeljs">EaselJS</a> es una librería open source/libre que facilita el uso de canvas para arte y juegos</li>
+ <li><a href="http://scrawl.rikweb.org.uk/">Scrawl-canvas</a> es otra librería open-source javascript para crear y manipular elementos canvas en 2D</li>
+ <li><a href="https://www.patrick-wied.at/static/heatmapjs/">heatmap.js</a> es una librería open-source para crear mapas (heatmaps)</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentarios</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'scripting.html#the-canvas-element', '&lt;canvas&gt;')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/es/docs/Web/WebGL">WebGL</a></li>
+</ul>