---
title: Basic Usage
localeTitle: Uso básico
---
## Uso básico de lona

Cuando use lienzo, primero coloque un lienzo en el documento como un elemento.

```html

<canvas width="400" height="400" id="canvas"></canvas> 
```

Los atributos de `width` y `height` controlarán el tamaño del lienzo. Estos atributos controlan el tamaño del lienzo de dibujo, no el tamaño real renderizado. Consulte la página "Dimensiones del lienzo" para obtener más información.

Para usar un `canvas` , primero debemos tomar el elemento de la página como un elemento DOM, y luego obtener un contexto de dibujo de él.

```js
var canvas = document.getElementById("canvas"); 
 var ctx = canvas.getContext('2d'); 
```

Todas las llamadas de dibujo después de esto se harán desde el objeto `ctx` . El `ctx` representa el contexto de dibujo del objeto y contiene información sobre el espacio de dibujo 2D. El objeto `canvas` es el elemento DOM real. Interactuar con él nos permite acceder a atributos como el `width` y el `height` .

Hay algunos contextos de dibujo disponibles, incluyendo `webgl` . WebGL es realmente una tecnología completamente diferente, por lo que solo nos centraremos en el dibujo 2D.

Los caminos son el bloque de construcción del dibujo en `canvas` . Vea la página de ' [Rutas](/articles/canvas/paths) ' para más.

#### Más información:

*   [API MDN Canvas](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API)
*   [HTMLCanvasElement.getContext () (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/getContext)