HTMLCanvasElement

Интерфейс HTMLCanvasElement предоставляет свойства и методы для управления расположением и представлением элементов canvas. Он также наследует свойства и методы интерфейса HTMLElement.

Свойства

Наследуются от родителя, HTMLElement.

HTMLCanvasElement.height
Положительное целое число, отражающее HTML-атрибут height элемента <canvas> (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется значение по умолчанию  — 150.
HTMLCanvasElement.mozOpaque (en-US) Это API не было стандартизировано.
Объект Boolean, отражающий HTML-атрибут moz-opaque элемента <canvas>. Сообщает холсту, будет ли присутствовать прозрачность. Если холсту известно, что прозрачность не используется, отрисовка может быть оптимизирована.
HTMLCanvasElement.width (en-US)
Положительное целое число, отражающее HTML-атрибут width элемента <canvas> (воспринимается в пикселях CSS). Если атрибут не определён или имеет некорректное значение (например отрицательное), используется значение по умолчанию  — 300.
HTMLCanvasElement.mozPrintCallback Это API не было стандартизировано.
Is a function that is Initially null, Web content can set this to a JavaScript function that will be called if the page is printed. This function can then redraw the canvas at a higher resolution that is suitable for the printer being used. See this blog post.

Методы

Наследуются от родителя, HTMLElement.

HTMLCanvasElement.captureStream() Это экспериментальное API, которое не должно использоваться в рабочем коде.
Возвращает CanvasCaptureMediaStream (en-US) — поток видео, которое захватывается в реальном времени с поверхности холста.
HTMLCanvasElement.getContext()
Возвращает связный с холстом контекст, который позволяет рисовать на холсте. Если context ID не поддерживается, возвращает null. Вызов getContext с параметром "2d" возвращает объект CanvasRenderingContext2D, тогда так вызов с параметром "experimental-webgl" (или "webgl") возвращает объект WebGLRenderingContext. Этот контекст поддерживается только в браузерах, в которых реализован WebGL.
HTMLCanvasElement.toDataURL() (en-US)
Возвращает data-URL, который содержит представление картинки в формате. указанном в параметре type (по умолчанию png). Возвращаемая картинка имеет разрешение 96dpi.
HTMLCanvasElement.toBlob()
Создаёт объект Blob, представляющий картинку, которая содержится в холсте. Этот файл может быть кеширован на диске или сохранён в памяти на усмотрение user agent.
HTMLCanvasElement.transferControlToOffscreen() Это экспериментальное API, которое не должно использоваться в рабочем коде.
Передаёт управление объекту OffscreenCanvas (en-US), либо в main thread либо в worker.
HTMLCanvasElement.mozGetAsFile() (en-US) Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать.
Возвращает объект File представляющий картинку, которая содержится в холсте. This file is a memory-based file, with the specified name. Если тип не указан, используется image/png.

Specifications

Specification Status Comment
Media Capture from DOM Elements
Определение 'HTMLCanvasElement' в этой спецификации.		 Рабочий черновик Adds the method captureStream().
HTML Living Standard
Определение 'HTMLCanvasElement' в этой спецификации.		 Живой стандарт The method getContext() now returns a RenderingContext rather than an opaque object.
The methods probablySupportsContext(), setContext() and transferControlToProxy()have been added.
HTML 5.1
Определение 'HTMLCanvasElement' в этой спецификации.		 Рекомендация  
HTML5
Определение 'HTMLCanvasElement' в этой спецификации.		 Рекомендация Initial definition.

Browser compatibility

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! (en-US)
Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (2D context) 4.0 3.6 (1.9.2) 9.0 9.0 [1] 3.1
toBlob() 50 19 (19) [2] ? ? Нет (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy() Это экспериментальное API, которое не должно использоваться в рабочем коде. 		Нет Нет Нет Нет Нет
mozGetAsFile() Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. Нет 4.0 (2) Нет Нет Нет
captureStream() Это экспериментальное API, которое не должно использоваться в рабочем коде. Нет 41 (41) Нет Нет Нет
transferControlToOffscreen() Это экспериментальное API, которое не должно использоваться в рабочем коде. Нет 44 (44) [3] Нет Нет Нет
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support (2D context) 2.1 (Да) (Да) ? 10.0 [1] 3.2
webgl context ? ? (Да) as experimental-webgl ? ? ?
toBlob() Нет (bug 67587) 50 18.0 (18) [2] ? ? Нет (bug 71270)
probablySupportsContext(),
setContext(),
transferControlToProxy() Это экспериментальное API, которое не должно использоваться в рабочем коде. 		Нет Нет Нет Нет Нет Нет
mozGetAsFile() Это API не было стандартизировано. Это устаревшее API больше не должно использоваться, но оно по-прежнему может работать. Нет Нет 4.0 (2) Нет Нет Нет
captureStream() Это экспериментальное API, которое не должно использоваться в рабочем коде. Нет Нет 41.0 (41) Нет Нет Нет
transferControlToOffscreen() Это экспериментальное API, которое не должно использоваться в рабочем коде. Нет Нет 44.0 (44) [3] Нет Нет Нет

[1] Opera Mini 5.0 and later has partial support.

[2] Support for the third parameter, has been added in Gecko 25 only: when used with the "image/jpeg" type, this argument specifies the image quality.

[3] This feature is behind a feature preference setting. In about:config, set gfx.offscreencanvas.enabled to true.

See also

  • HTML element implementing this interface: <canvas>.