Amit Padhiyar - Saatody

Today, The HTML canvas is very useful element for all developers who are creating web games, web controls, and web tools. In this post, I will explain about small use (but very important) of HTML Canvas is Convert HTML canvas (2d shapes and image) to image format and save image output in your device (local memory / hard drive / memory card). See the below three images All images file name is below with its URL. Picture1.png: https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge9MKEaMz95QfnJ9V8_dB0keUqzrRONXVhNMf0Jjd70JCR2y9yD9Y7xhszimwpCjFCjysS3aulEdqXfC7INlU7qxi9B_PYoJ_Qrpf7NWyNtE8sRmjyNI4qoiLlVrQOvKIIxbjAuhx3nom7/s764/Picture1.png Picture2.png:  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSVJGrvKBqVHFYd0XF6F8qZ-q8upO19r0ApVMTe_A4b6HlD7KAjP2ivvNSzbQbs-oues6kTNaSjphuRYdewEnY20s1QDYRLuf2akkg4p3d2ahYUX8zrBp5EjeyAlyjPdveXVKDMRwtkYX6/s683/Picture2.png Picture3.png:  https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5uvMT6462oSgXFOA6yRA6zXR-iB79VOIIoZYe0vYV

<div id="textbox" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</div> <script> var textbox = document.getElementById("textbox"); textbox.addEventListener("keydown",function(event){ if(event.keyCode == 13){ var enterChar = String.fromCharCode(13); var regExp = new RegExp(enterChar,"g"); textbox.innerHTML = textbox.textContent.replace(regExp,""); } }); </script>

Shadow DOM is second most useful feature for web components after custom elements. It is useful for markup structure, style, and behavior hidden and separate from other code on the page. In short, It is known as encapsulation. Shadow DOM is supported by default in Firefox (63 and onwards), Chrome, Opera, and Safari. The new Chromium-based Edge (75 and onwards) supports it too; the old Edge didn't. The Shadow DOM is not new thing for browsers. Shadow DOM allows hidden DOM trees to be attached to elements in the regular DOM tree. This shadow DOM tree starts with a shadow root, underneath which can be attached to any elements you want, in the same way as the normal DOM. Shadow DOM Shadow host: The regular DOM node that the shadow DOM is attached to. Shadow tree: The DOM tree inside the shadow DOM. Shadow boundary: The place where the shadow DOM ends, and the regular DOM begins. Shadow root: The root node of the shadow tree. First we create simple custom element.

You can define several different callbacks inside a custom element's class definition, which fire at different points in the element's lifecycle. connectedCallback: Invoked each time the custom element is appended into a document-connected element. This will happen each time the node is moved, and may happen before the element's contents have been fully parsed. disconnectedCallback: Invoked each time the custom element is disconnected from the document's DOM. adoptedCallback: Invoked each time the custom element is moved to a new document. attributeChangedCallback: Invoked each time one of the custom element's attributes is added, removed, or changed. Which attributes to notice change for is specified in a static get observedAttributes method In Short... connectedCallback: Invoked when the custom element is first connected to the document's DOM. disconnectedCallback: Invoked when the custom element is disconnected from the document'

Define class with class name and outside of the define() function is the best way to create custom element. <script> class HelloMSG extends HTMLElement{ constructor(){ super(); console.log("constructor"); } } window.customElements.define("hello-msg",HelloMSG); </script> There is one thing that prove why i recommended to define HTML custom element like this. <script> const msg = new HelloMSG(); document.body.appendChild(msg); </script> For append my HTML custom element using JavaScript.

CustomElementRegistry The CustomElementRegistry interface provides methods for registering custom elements and querying registered elements. But, The CustomElementRegistry function, which is currently experimental (Expect behavior to change in the future). The CustomElementRegistry is available through the window.customElements property. Methods In my browser, The CustomElementRegistry can't work properly. So i will not use this property and i recommended window.customElements instead of CustomElementRegistry. CustomElementRegistry.define() CustomElementRegistry.get() CustomElementRegistry.upgrade() CustomElementRegistry.whenDefined() window.customElements The customElements read-only property of the Window interface returns a reference to the CustomElementRegistry object, which can be used to register new custom elements and get information about previously registered custom elements. How to check the window.customElements return CustomElementRegistry? There i

Web Components are set of features or suite of different technologies that allowing to create, encapsulation and interoperability of reusable HTML custom elements. There are main three technologies to create Web Components. Custom Elements Shadow DOM HTML Templates Custom Elements A set of JavaScript APIs that allow you to define custom elements and their behaviour. There are two parts to Custom Elements: autonomous custom elements and customized built-in elements. Autonomous custom elements are HTML elements that are entirely separated from native HTML elements; they are essentially built from the bottom up using the Custom Elements API. Customized built-in elements are elements that are built upon native HTML elements to reuse their functionality. Shadow DOM A set of JavaScript APIs for attaching an encapsulated "shadow" DOM tree to an element. And shadow DOM is a functionality that allows the web browser to render DOM elements without putting them into t