We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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
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()
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()
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.
HTMLCanvasElement.mozFetchAsStream()
Crea un nuevo flujo de entrada, el cual una vez listo, proveerá los contenidos del canvas como datos de imagen. Cuando el nuevo flujo está listo, la retrollamada específica el método nsIInputStreamCallback.onInputStreamReady() es invocada. Si no se especifica el tipo, el tipo de imagen por defecto es image/png.
Nota: Sólo puede ser invocado desde Chrome.

Especificaciones

Especificación Estado Comentario
Media Capture from DOM Elements
La definición de 'HTMLCanvasElement' en esta especificación.
Working Draft Añade el método  captureStream().
HTML Living Standard
La definición de 'HTMLCanvasElement' en esta especificación.
Living Standard El método getContext()ahora retorna un objeto RenderingContext en vez de un objeto opaco.
Los métodos  probablySupportsContext(), setContext() y transferControlToProxy() han sido añadidos.
HTML 5.1
La definición de 'HTMLCanvasElement' en esta especificación.
Recommendation  
HTML5
La definición de 'HTMLCanvasElement' en esta especificación.
Recommendation Definición Inicial.

Compatibilidad en Navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Soporte básico (2D context) 4.0 3.6 (1.9.2) 9.0 9.0 [1] 3.1
webgl context 9.0 as experimental-webgl
~33 as webgl
3.6 (1.9.2) as experimental-webgl
24 (24) as webgl
11.0 as experimental-webgl 9.0 as experimental-webgl, behind a user pref.
15.0 as experimental-webgl
5.1 as experimental-webgl
~8.0 as webgl
toBlob() Sin soporte (bug 67587) 19 (19) [2] ? ? Sin soporte (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy()
Sin soporte Sin soporte Sin soporte Sin soporte Sin soporte
mozGetAsFile() Sin soporte 4.0 (2) Sin soporte Sin soporte Sin soporte
mozFetchAsStream() Sin soporte 13 (13) Sin soporte Sin soporte Sin soporte
captureStream() Sin soporte 41 (41) Sin soporte Sin soporte Sin soporte
Característica Android Chrome para Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Soporte básico (2D context) 2.1 (Yes) (Yes) ? 10.0 [1] 3.2
webgl context ? ? (Yes) as experimental-webgl ? ? ?
toBlob() Sin soporte (bug 67587) Sin soporte (bug 67587) 18.0 (18) [2] ? ? Sin soporte (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy()
Sin soporte Sin soporte Sin soporte Sin soporte Sin soporte Sin soporte
mozGetAsFile() Sin soporte Sin soporte 4.0 (2) Sin soporte Sin soporte Sin soporte
mozFetchAsStream() Sin soporte Sin soporte 13.0 (13) Sin soporte Sin soporte Sin soporte
captureStream() Sin soporte Sin soporte 41.0 (41) Sin soporte Sin soporte Sin soporte

[1] Opera Mini 5.0 y posteriores poseen soporte parcial.

[2] Soporte para un tercer parámetro, ha sido añadido sólo en Gecko 25: cuando se utiliza con el tipo "image/jpeg", este argumento especifica la calida de imagen.

Ver también

  • Elementos HTML implementando esta interfaz: <canvas>.

Etiquetas y colaboradores del documento

Colaboradores en esta página: AshWilliams
Última actualización por: AshWilliams,