Dibujar en el lienzo con JavaScript
Todos los dibujos en el lienzo de HTML debe ser hecho con JavaScript:
Ejemplo
<script>
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0,0,150,75);
</script>
Inténtalo tú mismo " Paso 1: Encontrar el elemento canvas
En primer lugar, debe encontrar el <canvas> elemento.
Esto se hace usando el método de HTML DOM getElementById() :
var canvas = document.getElementById("myCanvas");
Paso 2: Crear un objeto de dibujo
En segundo lugar, se necesita un objeto de dibujo de la tela.
El getContext() es un objeto HTML incorporado, con propiedades y métodos para el dibujo:
var ctx = canvas.getContext("2d");
Paso 3: Dibujar en el lienzo
Por último, se puede dibujar en el lienzo.
Ajuste el estilo de relleno del objeto de dibujo al color rojo:
ctx.fillStyle = "#FF0000";La propiedad fillStyle puede ser un color CSS, un degradado o un patrón. El valor por defecto es fillStyle negro.
El fillRect( x,y,width,height ) método dibuja un rectángulo, lleno del estilo de relleno, en el lienzo:
ctx.fillRect(0,0,150,75);