HTMLCanvasElement
Related Docs:
object HTMLCanvasElement
| package canvas
Inserts a set of Node objects or DOMString objects after the last child of the ParentNode.
Inserts a set of Node objects or DOMString objects after the last child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.
A set of Node or DOMString objects to insert.
Add a new node (and its subtree, if applicable) to the end of the list of children of this node.
Add a new node (and its subtree, if applicable) to the end of the list of children of this node.
If the new child is already present in the DOM tree it is first removed (effectively moving it). If the new child is a DocumentFragment node then the entire contents of the document fragment are appended, but the fragment node itself is not (therefore using a document fragment is a good way of building and attaching several nodes at once).
The new node to be added to this node. If the new node has any children these are also added recursively, preserving the new node's sub-tree.
The node that was added
The attributes collection is an unordered list of all the effective attributes1 of an Element; for other nodes this property is null.
The attributes collection is an unordered list of all the effective attributes1 of an Element; for other nodes this property is null.
This collection is a NamedNodeMap, primarily intended to be accessed by name. It's also possible to access the items by their index in the map, however the DOM does not specify what order they will appear in (and this varies by browser, as noted in the Compatibility notes below).
As with all named node maps, attributes is a live collection, which means that changes to the collection it represents are immediately reflected in the node map (as opposed to it being a static snapshot). This collection is read-only.
Removes the keyboard focus from the current element.
Removes the keyboard focus from the current element.
Returns a CanvasCaptureMediaStream that is a real-time video capture of the surface of the canvas.
Returns an unsigned long giving the amount of children that the object has.
Returns an unsigned long giving the amount of children that the object has.
The childNodes collection is an ordered list of all the direct child nodes of this node; if there are no child nodes then this collection is empty (it has zero length).
The childNodes collection is an ordered list of all the direct child nodes of this node; if there are no child nodes then this collection is empty (it has zero length). The childNodes collection is a NodeList, in which the items are indexed numerically, and appear in source order.
As with all node lists, childNodes is a live collection, which means that changes to the collection it represents are immediately reflected in the node list (as opposed to it being a static snapshot).
Attributes of an element are not considered child nodes, and therefore don’t appear in the childNodes collection2 This collection is read only.
an ordered list of all the direct child nodes of this node
Returns a live HTMLCollection containing all objects of type Element that are children of this ParentNode.
Returns a live HTMLCollection containing all objects of type Element that are children of this ParentNode.
Sends a mouse click event to the element.
Sends a mouse click event to the element.
Creates a duplicate of this node, including all attributes and their values (including attributes which are not explicitly defined but which have a default value in this document type).
Creates a duplicate of this node, including all attributes and their values (including attributes which are not explicitly defined but which have a default value in this document type). The duplicate node has no parent (parentNode is null) until it's added to the document, for example using appendChild.
If the deep argument is included and has the value true then the node's sub-tree (if any) will also be duplicated.
Cloning a sub-tree that is readonly results in a sub-tree that can be modified (ie. the sub-tree of a cloned node is always mutable, even if the original was immutable), with the exception that the children of a cloned EntityReference are always readonly.
Cloning an Element node also copies its attributes (including any default attributes), but does not copy its text unless the deep argument is true.
Cloning an Attr node directly (as opposed to attributes that belong to a cloned Element) creates a node for which the specified property is true.
Whether a Document, DocumentType, Entity or Notation node may be cloned is not defined by the DOM, and depends on the implementation (see Compatibility notes below).
If true duplicate the node's sub-tree as well as the node itself. If false only copy the node (and its attributes, if it's an Element).
The duplicate node.
Is a DOMString, where a value of "true" means the element is editable and a value of "false" means it isn't.
Is a DOMString, where a value of "true" means the element is editable and a value of "false" means it isn't.
Is a HTMLMenuElement representing the contextual menu associated with the element.
Is a HTMLMenuElement representing the contextual menu associated with the element. It may be null
Returns a DOMStringMap with which script can read and write the element's custom data attributes (data-*).
Returns a DOMStringMap with which script can read and write the element's custom data attributes (data-*).
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dataset
Is a DOMString, reflecting the dir global attribute, representing the directionality of the element.
Is a DOMString, reflecting the dir global attribute, representing the directionality of the element. Possible values are "ltr", "rtl", and "auto".
The first node that is a direct child of this node (ie.
The first node that is a direct child of this node (ie. this node is its parent and it appears at the beginning of the childNodes collection), or null if there is no such node. This property is readonly.
The first node that is a direct child of this node
Returns the Element that is the first child of this ParentNode, or null if there is none.
Returns the Element that is the first child of this ParentNode, or null if there is none.
Gives the keyboard focus to the current element.
Gives the keyboard focus to the current element.
Get the value of an attribute with the specified name.
Get the value of an attribute with the specified name.
This method is for working with non-namespaced attributes; to get a namespaced attribute, use the DOM 2 getAttributeNS method instead.
The name of the attribute to retrieve.
The attribute value; if the attribute is not defined this method should return an empty string, however most browsers return null
Get the value of an attribute with the specified name and namespace URI.
Get the value of an attribute with the specified name and namespace URI.
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace. See Attr for more details.
The namespaceURI of the attribute to retrieve. A value of null means no namespace.
The localName of the attribute to retrieve.
Get an Attr node with the specified name.
Get an Attr node with the specified name.
The value of this node can then be retrieved with the value property of Attr, or the more general nodeValue property of Node.
This method is for working with non-namespaced attribute nodes; to get a namespaced attribute node, use the DOM 2 getAttributeNodeNS method instead.
The nodeName of the attribute node to retrieve.
The attribute node; or null if the specified attribute is not defined.
Get an Attr node with the specified localName and namespaceURI.
Get an Attr node with the specified localName and namespaceURI.
The value of this node can then be retrieved with the value property of Attr, or the more general nodeValue property of Node.
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace. See Attr for more details.
The namespaceURI of the attribute node to retrieve. A value of null means no namespace.
The localName of the attribute node to retrieve.
The attribute node; or null if the specified attribute is not defined.
Returns a drawing context on the canvas, or null if the context ID is not supported.
Returns a drawing context on the canvas, or null if the context ID is not supported. A drawing context lets you draw on the canvas. Calling getContext with "2d" returns a CanvasRenderingContext2D object, whereas calling it with "experimental-webgl" (or "webgl") returns a WebGLRenderingContext object. This context is only available on browsers that implement WebGL.
Is a DOMString containing the context identifier defining the drawing context associated to the canvas. Possible values are: "2d", leading to the creation of a CanvasRenderingContext2D object representing a two-dimensional rendering context. "webgl" (or "experimental-webgl") which will create a WebGLRenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 1 (OpenGL ES 2.0). "webgl2" (or "experimental-webgl2") which will create a WebGL2RenderingContext object representing a three-dimensional rendering context. This context is only available on browsers that implement WebGL version 2 (OpenGL ES 3.0). "bitmaprenderer" which will create a ImageBitmapRenderingContext which only provides functionality to replace the content of the canvas with a given ImageBitmap.
You can use several context attributes when creating your rendering context
a RenderingContext implementation
Get an ordered list of all elements with a given tag name, that are descendants of this document or element, in the linear order in which they appear in the DOM tree.
Get an ordered list of all elements with a given tag name, that are descendants of this document or element, in the linear order in which they appear in the DOM tree.
The returned collection is a HTMLCollection — an ordered collection of nodes, indexed numerically starting from zero. If there are no matching elements then it's a collection with zero members.
The tagName of the elements to match. The value * matches all elements.
A HTMLCollection containing all the matched elements; if no elements are found this will be a l ist with zero members.
Get an ordered list of all elements with a given local name and namespace URI, that are descendents of this document or element, in the linear order in which they appear in the DOM tree.
Get an ordered list of all elements with a given local name and namespace URI, that are descendents of this document or element, in the linear order in which they appear in the DOM tree.
The returned collection is a HTMLCollection — an ordered collection of nodes, indexed numerically starting from zero. If there are no matching elements then it's a collection with zero members.
The namespaceURI of the elements to match. A value of null means no namespace. The value * matches elements in all namespaces, including elements in no namespace.
The localName of the elements to match. The value * matches all elements.
A HTMLCollection containing all the matched elements; if no elements are found this will be a list with zero members.
Whether this element has an attribute with the specified local name and namespace URI, or has a specific default value for that attribute in this document type.
Whether this element has an attribute with the specified local name and namespace URI, or has a specific default value for that attribute in this document type.
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace.
The namespaceURI of the attribute to look for. A value of null means no namespace.
The localName of the attribute to look for.
Returns true if an attribute with the specified local name and namespace URI is defined for this element, or has a specific default value in this document type, otherwise false
Whether this element has an attribute with the specified name, or has a specific default value for that attribute in this document type.
Whether this element has an attribute with the specified name, or has a specific default value for that attribute in this document type.
The name of the attribute to look for.
Returns true if an attribute with the specified name is defined for this element, or has a specific default value in this document type, otherwise false
Returns whether an Element node has any attributes.
Returns whether an Element node has any attributes.
true if this node is an Element and has any effective attributes, otherwise false
Test whether a node has any child nodes; equivalent to evaluating whether the childNodes collection has a length greater than zero.
Test whether a node has any child nodes; equivalent to evaluating whether the childNodes collection has a length greater than zero.
true if this node has any children, otherwise false
A positive integer reflecting the height HTML attribute of the <canvas> element interpreted in CSS pixels.
A positive integer reflecting the height HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 150 is used.
Insert a new node as a child of this node, directly before an existing child of this node, or at the end of the list of children if no existing child is specified or it's null.
Insert a new node as a child of this node, directly before an existing child of this node, or at the end of the list of children if no existing child is specified or it's null. If the new child is already present in the DOM tree it is first removed (effectively moving it).
The new node to insert.
An existing child node that the new node should be inserted before. If this argument is null, the new node is inserted at the end of this node's list of children.
the inserted node
Returns a Boolean that indicates whether or not the content of the element can be edited.
Returns a Boolean that indicates whether or not the content of the element can be edited.
Test whether a specific feature of the DOM is implemented, and supported by this node.
Test whether a specific feature of the DOM is implemented, and supported by this node.
This method is essentially the same as hasFeature, except that it's concerned with whether a feature is supported by a specific node, rather than whether it's implemented in general.
The name of the feature to test, using one of the values defined in the DOM 2 Conformance list.
The DOM version to test. For DOM 2 this is always the value 2.0. If this argument is not specified, the method will return true if the feature is supported at any DOM level.
true if the feature is implemented and supported on this node, otherwise false
Is a DOMString representing the language of an element's attributes, text, and element contents.
Is a DOMString representing the language of an element's attributes, text, and element contents.
The last node that is a direct child of this node (ie.
The last node that is a direct child of this node (ie. this node is its parent and it appears at the end of the childNodes collection), or null if there is no such node. This property is readonly.
The last node that is a direct child of this node
Returns the Element that is the last child of this ParentNode, or null if there is none.
Returns the Element that is the last child of this ParentNode, or null if there is none.
The local name (ie.
The local name (ie. not including any namespace prefix) of a Element or Attr node; for other nodes this property is null.
DOM 1 methods such as getAttribute are not namespace aware, and identify nodes by their nodeName. Namespace aware DOM 2 methods such as getAttributeNS identify nodes by a combination of their namespaceURI and localName; the localName and prefix combined form a qualified name — a name which comprises the namespace prefix then the local name, delimited with a colon. This property is readonly.
The local name
Returns a File object representing the image contained in the canvas; this file is a memory-based file, with the specified name.
Returns a File object representing the image contained in the canvas; this file is a memory-based file, with the specified name. If type is not specified, the image type is image/png.
A Boolean reflecting the moz-opaque HTML attribute of the <canvas> element.
A Boolean reflecting the moz-opaque HTML attribute of the <canvas> element. It lets the canvas know whether or not translucency will be a factor. If the canvas knows there's no translucency, painting performance can be optimized.
The namespace URI of an Element or Attr node.
The namespace URI of an Element or Attr node. For other nodes, or elements or attributes created with a DOM 1 method that isn't namespace aware (such as createElement), or nodes with no namespace, this property is null.
This should not be a computed value or lookup of the namespace an element should have, it should be the literal value that it does have.
An Element node can inherit its namespace from an ancestor. However Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace. This property is readonly.
The namespace URI
The node immediately after this node (ie.
The node immediately after this node (ie. both nodes have the same parent and are next to each other in its childNodes collection), or null if there is no such node. This property is readonly.
The node immediately after this node
The name of this node
The name of this node
A numeric code that represents the type of this node +---------------------------+----+ | Element | 1 | | Attr | 2 | | Text | 3 | | CDATASection | 4 | | EntityReference | 5 | | Entity | 6 | | ProcessingInstruction | 7 | | Comment | 8 | | Document | 9 | | DocumentType | 10 | | DocumentFragment | 11 | | Notation | 12 | +---------------------------+----+
A numeric code that represents the type of this node +---------------------------+----+ | Element | 1 | | Attr | 2 | | Text | 3 | | CDATASection | 4 | | EntityReference | 5 | | Entity | 6 | | ProcessingInstruction | 7 | | Comment | 8 | | Document | 9 | | DocumentType | 10 | | DocumentFragment | 11 | | Notation | 12 | +---------------------------+----+
the numeric code
The value of this node
The value of this node
Puts this node's sub-tree in a state whereby only structural nodes separate Text nodes.
Puts this node's sub-tree in a state whereby only structural nodes separate Text nodes.
When a document is first loaded there will be only one Text node for each block of text. Operations such as splitText may divide blocks of text into multiple sibling Text nodes, as may creating and adding new Text nodes, but such divisions will not persist between sessions. The normalize method merges adjacent nodes to [re]create the load state of a single Text node for each block of text.
The Document which contains this node; or null if this node is itself a Document, or a DocumentType that is not associated with any document.
The Document which contains this node; or null if this node is itself a Document, or a DocumentType that is not associated with any document. This property is read-only.
The parent of this node; or null if it has no parent.
The parent of this node; or null if it has no parent.
Nodes which have just been created but not added to the document, or have just been removed from the document, or are Attr, Document, DocumentFragment or Entity nodes, do not have a parent. This property is readonly.
The namespace prefix of this node; or null if this node has no namespace.
The namespace prefix of this node; or null if this node has no namespace.
Only namespaced elements and attributes have a prefix; for other nodes, or for elements or attributes created with a non-namespace-aware method such as createElement, the prefix property is null.
Changing this value may also change the nodeName of this node (since the node name of a namespaced node is a combination of of localName and prefix), as well as the tagName and name properties of elements and attributes (respectively).
Changing the prefix of an element or attribute that has a default value in this document type does not cause a new default node to be created (ie. the prefix change might mean that the default is no longer present, but a new default will not appear to replace it). This property is read/write.
Inserts a set of Node objects or DOMString objects before the first child of the ParentNode.
Inserts a set of Node objects or DOMString objects before the first child of the ParentNode. DOMString objects are inserted as equivalent Text nodes.
A set of Node or DOMString objects to insert.
The node immediately before this node (ie.
The node immediately before this node (ie. both nodes have the same parent and are next to each other in its childNodes collection), or null if there is no such node. This property is readonly.
Remove an attribute with the specified name.
Remove an attribute with the specified name.
If the attribute has a specific default value in this document type, removing the attribute should replace it with the default value (as well as its corresponding namespaceURI, localName and prefix if applicable).
This method removes non-namespaced attributes; to remove a namespaced attribute, use the DOM 2 removeAttributeNS method instead.
The name of the attribute to remove.
Remove an attribute with the specified name and namespace URI.
Remove an attribute with the specified name and namespace URI.
If the attribute has a specific default value in this document type, removing the attribute should replace it with the default value, having the same namespaceURI, localName and prefix.
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace. See Attr for more details.
The namespaceURI of the attribute to remove. A value of null means no namespace.
The localName of the attribute to remove.
Remove a specified attribute node (a reference to which can be retrieved with getAttributeNode or getAttributeNodeNS).
Remove a specified attribute node (a reference to which can be retrieved with getAttributeNode or getAttributeNodeNS). This method is essentially the same as removeAttribute, except that its argument is the attribute node itself, rather than the attribute's name.
If the attribute has a specific default value in this document type, a new node should be created with the default value (and the same namespaceURI, localName and prefix if applicable).
The attribute node to remove.
The attribute node that was removed
Removes a specified node from the children of this node.
Removes a specified node from the children of this node.
The node to be removed.
Replace an existing child of this node with a new child node.
Replace an existing child of this node with a new child node. If the new child is already present in the DOM tree it is first removed (effectively moving it).
The node to be added.
The node to be removed and replaced.
The node that was removed
Set a new attribute with the specified name and value to this element.
Set a new attribute with the specified name and value to this element. If an attribute already exists with the specified name, its value is replaced.
When setting a value, the value is not parsed, so any entity references or other markup will be treated as literal text. To create an attribute containing entities the specification suggests to create an Attr node with appropriate Text and EntityReference nodes as children, then add it to an element using setAttributeNode, however in practise this rarely works (see Attr for details).
This method is for working with non-namespaced attributes; to add a namespaced attribute, use the DOM 2 setAttributeNS method instead.
The name of the attribute to create or alter.
The string value for the attribute.
Set a new attribute with the specified local name, namespace URI and value to this element.
Set a new attribute with the specified local name, namespace URI and value to this element. If an attribute already exists with the same local name and namespace URI, its value is replaced and its prefix changed to the prefix part of the specified qualified name1.
When setting a value, the value is not parsed, so any entity references or other markup will be treated as literal text. To create an attribute containing entities the specification suggests to create an Attr node with appropriate Text and EntityReference nodes as children, then add it to an element using setAttributeNode, however in practise this rarely works (see Attr for details).
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace (see Attr for details).
The namespaceURI of the attribute to create or alter. A value of null means no namespace.
The qualified name of the attribute to create or alter.
The string value for the attribute.
Add an Attr node to this Element.
Add an Attr node to this Element. If an attribute already exists with the specified nodeName, the existing node is replaced with the new one.
This method is for working with non-namespaced attribute nodes; to add a namespaced attribute node, use the DOM 2 setAttributeNodeNS method instead.
The attribute node to add.
If the new attribute replaces an existing attribute, the previously existing attribute node is returned; otherwise null is returned.
Add a namespaced attribute node to this element.
Add a namespaced attribute node to this element. If an attribute already exists with the specified local name and namespace URI, the existing node is replaced.
The usage and behavior of this method is identical to setAttributeNode except that the local name and namespace URI are both taken into account when determining whether an existing attribute should be replaced, rather than just the name.
Unlike Element nodes, Attr nodes do not inherit a namespace from the element they're attached to — if an attribute does not have an explicitly defined namespace then it simply has no namespace (see Attr for details).
The attribute node to add. The node can subsequently be retrieved using its localName and namespaceURI.
If the new attribute replaces an existing attribute with the same local name and namespace URI, the previously existing attribute node is returned ; otherwise null is returned.
Is a CSSStyleDeclaration, an object representing the declarations of an element's style attributes.
Is a CSSStyleDeclaration, an object representing the declarations of an element's style attributes.
Is a long representing the position of the element in the tabbing order.
Is a long representing the position of the element in the tabbing order.
The qualified name of an Element node, including any namespace prefix.
The qualified name of an Element node, including any namespace prefix.
In HTML this is returned in all uppercase regardless of the case used in the document; in XML the case used in the document is preserved.
In all cases, the tagName of an element is exactly the same as its nodeName. This property is readonly.
Is a DOMString containing the text that appears in a popup box when mouse is over the element.
Is a DOMString containing the text that appears in a popup box when mouse is over the element.
The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent.
The HTMLCanvasElement.toBlob() method creates a Blob object representing the image contained in the canvas; this file may be cached on the disk or stored in memory at the discretion of the user agent. If type is not specified, the image type is image/png. The created image is in a resolution of 96dpi. The third argument is used with image/jpeg images to specify the quality of the output.
A callback function with the resulting Blob object as a single argument.
A DOMString indicating the image format. The default type is image/png.
A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. Other arguments are ignored.
The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG).
The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.
* If the height or width of the canvas is 0, the string "data:," is returned. * If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported. * Chrome also supports the image/webp type.
A Number between 0 and 1 indicating image quality if the requested type is image/jpeg or image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.
A DOMString containing the requested data URI.
The HTMLCanvasElement.transferControlToOffscreen() method transfers control to an OffscreenCanvas object, either on the main thread or on a worker.
A positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels.
A positive integer reflecting the width HTML attribute of the <canvas> element interpreted in CSS pixels. When the attribute is not specified, or if it is set to an invalid value, like a negative, the default value of 300 is used.
The HTMLCanvasElement interface provides properties and methods for manipulating the layout and presentation of canvas elements. The HTMLCanvasElement interface also inherits the properties and methods of the HTMLElement interface.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement