Dibujo de lienzo HTML
Dibujar en el lienzo con JavaScript
Todos los dibujos en el lienzo HTML deben hacerse con JavaScript:
Ejemplo
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Paso 1: encuentra el elemento Canvas
En primer lugar, debe encontrar el elemento <canvas>.
Esto se hace usando el método HTML DOM getElementById():
var canvas = document.getElementById("myCanvas");
Paso 2: crear un objeto de dibujo
En segundo lugar, necesita un objeto de dibujo para el lienzo.
getContext() es un objeto HTML incorporado, con propiedades y métodos para dibujar:
var ctx = canvas.getContext("2d");
Paso 3: Dibuja en el lienzo
Finalmente, puedes dibujar en el lienzo.
Establezca el estilo de relleno del objeto de dibujo en color rojo:
ctx.fillStyle = "#FF0000";
La propiedad fillStyle puede ser un color CSS, un degradado o un patrón. El estilo de relleno predeterminado es negro.
El método fillRect( x,y,width,height ) dibuja un rectángulo, relleno con el estilo de relleno, en el lienzo:
ctx.fillRect(0, 0, 150, 75);