HTMLCanvasElement

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La interfaz HTMLCanvasElement provee propiedades y métodos para manipular la capa de presentación de los elementos de tipo canvas. La interfaz HTMLCanvasElement también hereda las propiedades y métodos de la interfaz HTMLElement .

Propiedades

Hereda propiedades de la interfaz padre, HTMLElement.

HTMLCanvasElement.height

Un entero positivo que se asocia al atributo HTML height del elemento <canvas> interpretada en píxeles CSS. Cuando el atributo no está especificado, o si este se inicializa a un valor inválido, como un negativo, el valor 150 es usado por defecto.

HTMLCanvasElement.mozOpaque No estándar

Un Boolean asociado al atributo HTML moz-opaque del elemento <canvas> . Proporciona al canvas una forma de saber si la transparencia será considerada un factor. Si el canvas conoce que no hay transparencia, el desempeño de renderezación será optimizado.

HTMLCanvasElement.width

Un entero positivo asociado al atributo HTML width del elemento canvas <canvas> interpretado en píxeles CSS. Cuando el atributo no está especificado, o si se inicializa a un valor inválido, como un negativo, se utiliza el valor 300 por defecto.

Métodos

Herada métodos de la interfaz padre, HTMLElement.

HTMLCanvasElement.captureStream() Experimental

Retorna un CanvasCaptureMediaStream que es una captura de video en tiempo real, de la superficie del canvas.

HTMLCanvasElement.getContext()

Retorna el contexto del dibujado del canvas, o bien null(nulo) si el ID de contexto no está soportado. Un contexto de dibujo, te permite dibujar sobre el canvas. Llamando al método getContext con el parámetro "2d" retorna un objeto CanvasRenderingContext2D , mientras que el llamarlo con el parámetroca "experimental-webgl" (o "webgl") retorna un objeto WebGLRenderingContext . Este tipo de contexto sólo está disponible en navegadores que implementen WebGL.

HTMLCanvasElement.toDataURL()

Retorna una data-URL conteniendo una representación de la imagen en el formato especificado por el tipo de parámetro(png por defecto). La imagen de retorno se encuentra a una resolución de 96dpi.

HTMLCanvasElement.toBlob()

Crea un objeto Blob representando la imagen contenida en el canvas; este archivo puede ser cacheado en disco o bien almacenado en memoria, lo cual dependerá del "user-agent"(especificación del navegador).

HTMLCanvasElement.mozGetAsFile() No estándar Obsoleto

Retorna un objeto File representando una imagen contenida en el canvas; este archivo es del tipo memory-based, con su nombre especificado. Si el tipo no se especifica, el tipo usado por defecto es image/png.

Nota: Sólo puede ser invocado desde Chrome.

Especificaciones

Specification
HTML
# htmlcanvaselement

Compatibilidad con navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
HTMLCanvasElement
captureStream
contextlost event
contextrestored event
getContext
2d context
options.alpha parameter
options.colorSpace parameter
options.desynchronized parameter
options.willReadFrequently parameter
bitmaprenderer context
options.alpha parameter
WebGL2 context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
WebGL context
options.alpha parameter
options.desynchronized parameter
options.failIfMajorPerformanceCaveat parameter
options.powerPreference parameter
webgpu context
Experimental
height
mozOpaque
DeprecatedNon-standard
mozPrintCallback
Non-standard
toBlob
quality parameter
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
toDataURL
type parameter supports "image/jpeg"
type parameter supports "image/png"
type parameter supports "image/webp"
transferControlToOffscreen
webglcontextcreationerror event
webglcontextlost event
webglcontextrestored event
width

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
Uses a non-standard name.
Requires a vendor prefix or different name for use.
Has more compatibility info.

Ver también

  • Elementos HTML implementando esta interfaz: <canvas>.