Veamos primero las sintaxis:
<!DOCTYPE HTML>
<html>
<head>
<title> Trabajando con canvas </title>
</head>
<body>
<canvas id=”dibujo” width=”500” height=”300”></ canvas>
<script>
var canvas = document.getElementById(dibujo);
var context = canvas.getContext(‘2d’);
context.beginPath();
context.moveTo(50, 100);
context.lineTo(450, 50);
context.stroke();
</script>
</body>
</html>
En este ejemplo podemos ver que hemos creado una línea recta. Entendamos ahora uno a uno los métodos que usamos para lograrlo:
-context.beginPath() – Establece que comenzará un nuevo trazado.
-context.moveTo(50, 100) – Establece las coordenadas de X e Y donde comenzará el trazado dentro del canvas, es decir el primer nodo de la línea.
-context.lineTo(450, 50) – Determina donde se ubicará dentro del canvas el próximo nodo de la línea, en este caso el último.
-context.stroke() – Permite que la línea que acabamos de dibujar sea visible.
En este caso no hemos determinado un color para la línea, por ende se verá de color negro, que es el color por defecto que utiliza el navegador para todos los elementos. Grosor y color de las líneas Si queremos modificar el grosor y el color de las líneas creadas, debemos utilizar los métodos lineWidth y strokeStyle. Veamos un ejemplo para ambos casos:
<canvas id=”dibujo” width=”578” height=”200”></canvas>
<script>
