La etiqueta <canvas> en HTML se usa para dibujar gráficos en una página web usando JavaScript. Se puede usar para dibujar rutas, cuadros, textos, gradientes y agregar imágenes. Por defecto, no contiene bordes ni texto.
Sintaxis:
<canvas id="canvasID"> HTML Contents... <canvas>
Atributos: la etiqueta de lienzo tiene dos atributos que se enumeran a continuación.
- altura: este atributo se utiliza para establecer la altura del lienzo.
- ancho: este atributo se utiliza para establecer el ancho del lienzo.
Ejemplo 1:
HTML
<!-- HTML code to illustrate height and width attribute of canvas tag --> <!DOCTYPE html> <html> <body style="text-align:center;"> <h1 style="color:green;"> GeeksforGeeks </h1> <h3> How to specify the width and height of the canvas? </h3> <canvas id="canvasID" height="200" width="200" style="border:1px solid black"> </canvas> </body> </html>
Producción:
Ejemplo 2:
HTML
<!-- HTML code to illustrate height and
width attribute of canvas tag -->
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
How to specify the width
and height of the canvas?
</h3>
<canvas id="canvasID" height="200" width="200"
style="border:1px solid black">
</canvas>
<script>
var canvas = document.getElementById("canvasID");
// Getting a drawing context in the canvas
var context = canvas.getContext("2d");
context.beginPath();
context.arc(100, 100, 90, 0, 2 * Math.PI);
context.stroke();
</script>
</body>
</html>
Producción:
