W3cubDocs

/Dart 2

dart:html

CanvasElement class

Inheritance

Implemented types

CanvasImageSource

Annotations

@Native("HTMLCanvasElement")

Constructors

CanvasElement({int width, int height }) factory
CanvasElement.created(): Constructor instantiated by the DOM when a custom element has been created. [...]

Properties

context2D → CanvasRenderingContext2D read-only: An API for drawing on this canvas.
height ↔ int read / write: The height of this canvas element in CSS pixels.
onWebGlContextLost → ElementStream<ContextEvent> read-only: Stream of webglcontextlost events handled by this CanvasElement.
onWebGlContextRestored → ElementStream<ContextEvent> read-only: Stream of webglcontextrestored events handled by this CanvasElement.
width ↔ int read / write: The width of this canvas element in CSS pixels.
accessibleNode → AccessibleNode final, inherited
assignedSlot → SlotElement final, inherited
attributes ↔ Map<String, String> read / write, inherited: All attributes on this element. [...]
baseUri → String @JSName('baseURI'), final, inherited
borderEdge → CssRect read-only, inherited: Access the dimensions and position of this element's content + padding + border box. [...]
childNodes → List<Node> @Creates('NodeList'), @Returns('NodeList'), final, inherited: A list of this node's children. [...]
children ↔ List<Element> read / write, inherited: List of the direct children of this element. [...]
classes ↔ CssClassSet read / write, inherited: The set of CSS classes applied to this element. [...]
className ↔ String read / write, inherited
client → Rectangle<num> read-only, inherited: Gets the position of this element relative to the client area of the page.
clientHeight → int final, inherited
clientLeft → int final, inherited
clientTop → int final, inherited
clientWidth → int final, inherited
computedName → String final, inherited
computedRole → String final, inherited
contentEdge → CssRect read-only, inherited: Access this element's content position. [...]
contentEditable ↔ String read / write, inherited
dataset ↔ Map<String, String> read / write, inherited: Allows access to all custom data attributes (data-*) set on this element. [...]
dir ↔ String read / write, inherited
documentOffset → Point<num> read-only, inherited: Provides the coordinates of the element relative to the top of the document. [...]
draggable ↔ bool read / write, inherited: Indicates whether the element can be dragged and dropped. [...]
firstChild → Node final, inherited: The first child of this node. [...]
hashCode → int read-only, inherited: The hash code for this object. [...]
hidden ↔ bool read / write, inherited: Indicates whether the element is not relevant to the page's current state. [...]
id ↔ String read / write, inherited
inert ↔ bool read / write, inherited
innerHtml ↔ String read / write, inherited: Parses the HTML fragment and sets it as the contents of this element. [...]
innerText ↔ String @JSName('innerText'), read / write, inherited
inputMode ↔ String read / write, inherited
isConnected → bool final, inherited
isContentEditable → bool read-only, inherited
lang ↔ String read / write, inherited
lastChild → Node final, inherited: The last child of this node. [...]
localName → String @Returns('String'), read-only, inherited
marginEdge → CssRect read-only, inherited: Access the dimensions and position of this element's content + padding + border + margin box. [...]
namespaceUri → String read-only, inherited: A URI that identifies the XML namespace of this element. [...]
nextElementSibling → Element final, inherited
nextNode → Node @JSName('nextSibling'), final, inherited: The next sibling node. [...]
nodeName → String final, inherited: The name of this node. [...]
nodes ↔ List<Node> read / write, inherited: A modifiable list of this node's children.
nodeType → int final, inherited: The type of node. [...]
nodeValue → String final, inherited: The value of this node. [...]
nonce ↔ String read / write, inherited
offset → Rectangle<num> read-only, inherited: Gets the offset of this element relative to its offsetParent.
offsetHeight → int read-only, inherited
offsetLeft → int read-only, inherited
offsetParent → Element final, inherited
offsetTop → int read-only, inherited
offsetWidth → int read-only, inherited
on → ElementEvents read-only, inherited: This is an ease-of-use accessor for event streams which should only be used when an explicit accessor is not available.
onAbort → ElementStream<Event> read-only, inherited: Stream of abort events handled by this Element.
onBeforeCopy → ElementStream<Event> read-only, inherited: Stream of beforecopy events handled by this Element.
onBeforeCut → ElementStream<Event> read-only, inherited: Stream of beforecut events handled by this Element.
onBeforePaste → ElementStream<Event> read-only, inherited: Stream of beforepaste events handled by this Element.
onBlur → ElementStream<Event> read-only, inherited: Stream of blur events handled by this Element.
onCanPlay → ElementStream<Event> read-only, inherited
onCanPlayThrough → ElementStream<Event> read-only, inherited
onChange → ElementStream<Event> read-only, inherited: Stream of change events handled by this Element.
onClick → ElementStream<MouseEvent> read-only, inherited: Stream of click events handled by this Element.
onContextMenu → ElementStream<MouseEvent> read-only, inherited: Stream of contextmenu events handled by this Element.
onCopy → ElementStream<ClipboardEvent> read-only, inherited: Stream of copy events handled by this Element.
onCut → ElementStream<ClipboardEvent> read-only, inherited: Stream of cut events handled by this Element.
onDoubleClick → ElementStream<Event> @DomName('Element.ondblclick'), read-only, inherited: Stream of doubleclick events handled by this Element.
onDrag → ElementStream<MouseEvent> read-only, inherited: A stream of drag events fired when this element currently being dragged. [...]
onDragEnd → ElementStream<MouseEvent> read-only, inherited: A stream of dragend events fired when this element completes a drag operation. [...]
onDragEnter → ElementStream<MouseEvent> read-only, inherited: A stream of dragenter events fired when a dragged object is first dragged over this element. [...]
onDragLeave → ElementStream<MouseEvent> read-only, inherited: A stream of dragleave events fired when an object being dragged over this element leaves this element's target area. [...]
onDragOver → ElementStream<MouseEvent> read-only, inherited: A stream of dragover events fired when a dragged object is currently being dragged over this element. [...]
onDragStart → ElementStream<MouseEvent> read-only, inherited: A stream of dragstart events fired when this element starts being dragged. [...]
onDrop → ElementStream<MouseEvent> read-only, inherited: A stream of drop events fired when a dragged object is dropped on this element. [...]
onDurationChange → ElementStream<Event> read-only, inherited
onEmptied → ElementStream<Event> read-only, inherited
onEnded → ElementStream<Event> read-only, inherited
onError → ElementStream<Event> read-only, inherited: Stream of error events handled by this Element.
onFocus → ElementStream<Event> read-only, inherited: Stream of focus events handled by this Element.
onFullscreenChange → ElementStream<Event> read-only, inherited: Stream of fullscreenchange events handled by this Element.
onFullscreenError → ElementStream<Event> read-only, inherited: Stream of fullscreenerror events handled by this Element.
onInput → ElementStream<Event> read-only, inherited: Stream of input events handled by this Element.
onInvalid → ElementStream<Event> read-only, inherited: Stream of invalid events handled by this Element.
onKeyDown → ElementStream<KeyboardEvent> read-only, inherited: Stream of keydown events handled by this Element.
onKeyPress → ElementStream<KeyboardEvent> read-only, inherited: Stream of keypress events handled by this Element.
onKeyUp → ElementStream<KeyboardEvent> read-only, inherited: Stream of keyup events handled by this Element.
onLoad → ElementStream<Event> read-only, inherited: Stream of load events handled by this Element.
onLoadedData → ElementStream<Event> read-only, inherited
onLoadedMetadata → ElementStream<Event> read-only, inherited
onMouseDown → ElementStream<MouseEvent> read-only, inherited: Stream of mousedown events handled by this Element.
onMouseEnter → ElementStream<MouseEvent> read-only, inherited: Stream of mouseenter events handled by this Element.
onMouseLeave → ElementStream<MouseEvent> read-only, inherited: Stream of mouseleave events handled by this Element.
onMouseMove → ElementStream<MouseEvent> read-only, inherited: Stream of mousemove events handled by this Element.
onMouseOut → ElementStream<MouseEvent> read-only, inherited: Stream of mouseout events handled by this Element.
onMouseOver → ElementStream<MouseEvent> read-only, inherited: Stream of mouseover events handled by this Element.
onMouseUp → ElementStream<MouseEvent> read-only, inherited: Stream of mouseup events handled by this Element.
onMouseWheel → ElementStream<WheelEvent> read-only, inherited: Stream of mousewheel events handled by this Element.
onPaste → ElementStream<ClipboardEvent> read-only, inherited: Stream of paste events handled by this Element.
onPause → ElementStream<Event> read-only, inherited
onPlay → ElementStream<Event> read-only, inherited
onPlaying → ElementStream<Event> read-only, inherited
onRateChange → ElementStream<Event> read-only, inherited
onReset → ElementStream<Event> read-only, inherited: Stream of reset events handled by this Element.
onResize → ElementStream<Event> read-only, inherited
onScroll → ElementStream<Event> read-only, inherited: Stream of scroll events handled by this Element.
onSearch → ElementStream<Event> read-only, inherited: Stream of search events handled by this Element.
onSeeked → ElementStream<Event> read-only, inherited
onSeeking → ElementStream<Event> read-only, inherited
onSelect → ElementStream<Event> read-only, inherited: Stream of select events handled by this Element.
onSelectStart → ElementStream<Event> read-only, inherited: Stream of selectstart events handled by this Element.
onStalled → ElementStream<Event> read-only, inherited
onSubmit → ElementStream<Event> read-only, inherited: Stream of submit events handled by this Element.
onSuspend → ElementStream<Event> read-only, inherited
onTimeUpdate → ElementStream<Event> read-only, inherited
onTouchCancel → ElementStream<TouchEvent> read-only, inherited: Stream of touchcancel events handled by this Element.
onTouchEnd → ElementStream<TouchEvent> read-only, inherited: Stream of touchend events handled by this Element.
onTouchEnter → ElementStream<TouchEvent> read-only, inherited: Stream of touchenter events handled by this Element.
onTouchLeave → ElementStream<TouchEvent> read-only, inherited: Stream of touchleave events handled by this Element.
onTouchMove → ElementStream<TouchEvent> read-only, inherited: Stream of touchmove events handled by this Element.
onTouchStart → ElementStream<TouchEvent> read-only, inherited: Stream of touchstart events handled by this Element.
onTransitionEnd → ElementStream<TransitionEvent> @SupportedBrowser(SupportedBrowser.CHROME), @SupportedBrowser(SupportedBrowser.FIREFOX), @SupportedBrowser(SupportedBrowser.IE, '10'), @SupportedBrowser(SupportedBrowser.SAFARI), read-only, inherited: Stream of transitionend events handled by this Element.
onVolumeChange → ElementStream<Event> read-only, inherited
onWaiting → ElementStream<Event> read-only, inherited
onWheel → ElementStream<WheelEvent> read-only, inherited
outerHtml → String read-only, inherited
ownerDocument → Document final, inherited: The document this node belongs to. [...]
paddingEdge → CssRect read-only, inherited: Access the dimensions and position of this element's content + padding box. [...]
parent → Element @JSName('parentElement'), final, inherited: The parent element of this node. [...]
parentNode → Node final, inherited: The parent node of this node. [...]
previousElementSibling → Element final, inherited
previousNode → Node @JSName('previousSibling'), final, inherited: The previous sibling node. [...]
runtimeType → Type read-only, inherited: A representation of the runtime type of the object.
scrollHeight → int read-only, inherited
scrollLeft ↔ int read / write, inherited
scrollTop ↔ int read / write, inherited
scrollWidth → int read-only, inherited
shadowRoot → ShadowRoot @SupportedBrowser(SupportedBrowser.CHROME, '25'), read-only, inherited: The shadow root of this shadow host. [...]
slot ↔ String read / write, inherited
spellcheck ↔ bool read / write, inherited
style → CssStyleDeclaration final, inherited
styleMap → StylePropertyMap final, inherited
tabIndex ↔ int read / write, inherited
tagName → String final, inherited
text ↔ String @JSName('textContent'), read / write, inherited: All text within this node and its descendents. [...]
title ↔ String read / write, inherited
translate ↔ bool read / write, inherited: Specifies whether this element's text content changes when the page is localized. [...]

Methods

captureStream([num frameRate ]) → MediaStream

getContext3d({dynamic alpha: true, dynamic depth: true, dynamic stencil: false, dynamic antialias: true, dynamic premultipliedAlpha: true, dynamic preserveDrawingBuffer: false }) → RenderingContext @SupportedBrowser(SupportedBrowser.CHROME), @SupportedBrowser(SupportedBrowser.FIREFOX)

Returns a new Web GL context for this canvas. [...]

toBlob(String type, [ Object arguments ]) → Future<Blob>

toDataUrl([String type = 'image/png', num quality ]) → String

Returns a data URI containing a representation of the image in the format specified by type (defaults to 'image/png'). [...]

transferControlToOffscreen() → OffscreenCanvas

addEventListener(String type, EventListener listener, [ bool useCapture ]) → void inherited

after(Object nodes) → void inherited

animate(Iterable<Map<String, dynamic>> frames, [ dynamic timing ]) → Animation @SupportedBrowser(SupportedBrowser.CHROME, '36'), inherited

Creates a new AnimationEffect object whose target element is the object

on which the method is called, and calls the play() method of the

AnimationTimeline object of the document timeline of the node document

of the element, passing the newly created AnimationEffect as the argument

to the method. Returns an Animation for the effect.

Examples

var animation = elem.animate([{"opacity": 75}, {"opacity": 0}], 200);

var animation = elem.animate([

{"transform": "translate(100px, -100%)"},

{"transform" : "translate(400px, 500px)"}

], 1500);

The frames parameter is an Iterable, where the

map entries specify CSS animation effects. The

timing paramter can be a double, representing the number of milliseconds

for the transition, or a Map with fields corresponding to those

of the Timing object.

append(Node node) → Node @JSName('appendChild'), inherited

Adds a node to the end of the child nodes list of this node. [...]

appendHtml(String text, { NodeValidator validator, NodeTreeSanitizer treeSanitizer }) → void inherited

Parses the specified text as HTML and adds the resulting node after the last child of this element.

appendText(String text) → void inherited

Adds the specified text after the last child of this element.

attached() → void inherited

Called by the DOM when this element has been inserted into the live document. [...]

attachShadow(Map shadowRootInitDict) → ShadowRoot inherited

attributeChanged(String name, String oldValue, String newValue) → void inherited

Called by the DOM whenever an attribute on this has been changed.

before(Object nodes) → void inherited

blur() → void inherited

click() → void inherited

clone(bool deep) → Node @JSName('cloneNode'), inherited

Returns a copy of this node. [...]

closest(String selectors) → Element inherited

contains(Node other) → bool inherited

Returns true if this node contains the specified node. [...]

createFragment(String html, { NodeValidator validator, NodeTreeSanitizer treeSanitizer }) → DocumentFragment inherited

Create a DocumentFragment from the HTML fragment and ensure that it follows the sanitization rules specified by the validator or treeSanitizer. [...]

createShadowRoot() → ShadowRoot @SupportedBrowser(SupportedBrowser.CHROME, '25'), inherited

Creates a new shadow root for this shadow host. [...]

detached() → void inherited

Called by the DOM when this element has been removed from the live document. [...]

dispatchEvent(Event event) → bool inherited

enteredView() → void inherited

Deprecated*: override attached instead.

focus() → void inherited

getAnimations() → List<Animation> inherited

getAttribute(String name) → String inherited

getAttributeNames() → List<String> inherited

getAttributeNS(String namespaceURI, String name) → String inherited

getBoundingClientRect() → Rectangle<num> @Creates('_DomRect'), @Returns('_DomRect|Null'), inherited

Returns the smallest bounding rectangle that encompasses this element's padding, scrollbar, and border. [...]

getClientRects() → List<Rectangle<num>> inherited

getComputedStyle([String pseudoElement ]) → CssStyleDeclaration inherited

The set of all CSS values applied to this element, including inherited and default values. [...]

getDestinationInsertionPoints() → List<Node> @Creates('NodeList'), @Returns('NodeList|Null'), inherited

Returns a list of shadow DOM insertion points to which this element is distributed. [...]

getElementsByClassName(String classNames) → List<Node> @Creates('NodeList|HtmlCollection'), @Returns('NodeList|HtmlCollection'), inherited

Returns a list of nodes with the given class name inside this element. [...]

getNamespacedAttributes(String namespace) → Map<String, String> inherited

Gets a map for manipulating the attributes of a particular namespace. [...]

getRootNode([Map options ]) → Node inherited

hasAttribute(String name) → bool inherited

hasAttributeNS(String namespaceURI, String name) → bool inherited

hasChildNodes() → bool inherited

Returns true if this node has any children. [...]

hasPointerCapture(int pointerId) → bool inherited

insertAdjacentElement(String where, Element element) → Element inherited

Inserts element into the DOM at the specified location. [...]

insertAdjacentHtml(String where, String html, { NodeValidator validator, NodeTreeSanitizer treeSanitizer }) → void inherited

Parses text as an HTML fragment and inserts it into the DOM at the specified location. [...]

insertAdjacentText(String where, String text) → void inherited

Inserts text into the DOM at the specified location. [...]

insertAllBefore(Iterable<Node> newNodes, Node refChild) → Node inherited

Inserts all of the nodes into this node directly before refChild. [...]

insertBefore(Node node, Node child) → Node inherited

Inserts all of the nodes into this node directly before refChild. [...]

leftView() → void inherited

Deprecated*: override detached instead.

matches(String selectors) → bool inherited

Checks if this element matches the CSS selectors.

matchesWithAncestors(String selectors) → bool inherited

Checks if this element or any of its parents match the CSS selectors.

noSuchMethod(Invocation invocation) → dynamic inherited

Invoked when a non-existent method or property is accessed. [...]

offsetTo(Element parent) → Point<num> inherited

Provides the offset of this element's borderEdge relative to the specified parent. [...]

querySelector(String selectors) → Element inherited

Finds the first descendant element of this element that matches the specified group of selectors. [...]

querySelectorAll<T extends Element>(String selectors) → ElementList<T> inherited

Finds all descendent elements of this element that match the specified group of selectors. [...]

releasePointerCapture(int pointerId) → void inherited

remove() → void inherited

Removes this node from the DOM.

removeAttribute(String name) → void inherited

removeAttributeNS(String namespaceURI, String name) → void inherited

removeEventListener(String type, EventListener listener, [ bool useCapture ]) → void inherited

replaceWith(Node otherNode) → Node inherited

Replaces this node with another node.

requestFullscreen() → void @JSName('webkitRequestFullscreen'), @SupportedBrowser(SupportedBrowser.CHROME), @SupportedBrowser(SupportedBrowser.SAFARI), inherited

Displays this element fullscreen. [...]

requestPointerLock() → void inherited

scroll([dynamic options_OR_x, num y ]) → void inherited

scrollBy([dynamic options_OR_x, num y ]) → void inherited

scrollIntoView([ScrollAlignment alignment ]) → void inherited

Scrolls this element into view. [...]

scrollTo([dynamic options_OR_x, num y ]) → void inherited

setApplyScroll(String nativeScrollBehavior) → Future<ScrollState> inherited

setAttribute(String name, String value) → void inherited

setAttributeNS(String namespaceURI, String name, String value) → void inherited

setDistributeScroll(String nativeScrollBehavior) → Future<ScrollState> inherited

setInnerHtml(String html, { NodeValidator validator, NodeTreeSanitizer treeSanitizer }) → void inherited

Parses the HTML fragment and sets it as the contents of this element. This ensures that the generated content follows the sanitization rules specified by the validator or treeSanitizer. [...]

setPointerCapture(int pointerId) → void inherited

toString() → String inherited

The string representation of this element. [...]

Operators

operator ==(dynamic other) → bool inherited: The equality operator. [...]

Constants

webGlContextLostEvent → const EventStreamProvider<ContextEvent>: Static factory designed to expose webglcontextlost events to event handlers that are not necessarily instances of CanvasElement. [...]
const EventStreamProvider<gl.ContextEvent>('webglcontextlost')
webGlContextRestoredEvent → const EventStreamProvider<ContextEvent>: Static factory designed to expose webglcontextrestored events to event handlers that are not necessarily instances of CanvasElement. [...]
const EventStreamProvider<gl.ContextEvent>('webglcontextrestored')

© 2012 the Dart project authors
Licensed under the Creative Commons Attribution-ShareAlike License v4.0.
https://api.dart.dev/stable/2.5.0/dart-html/CanvasElement-class.html