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: