Explanation: The <canvas> element allows you to draw graphics on the webpage using JavaScript. It is widely used for creating animations, games, and dynamic graphics.
<canvas> Tag<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
Output: This draws a green rectangle on the canvas.
<canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
Output: A blue rectangle is drawn, followed by a line and text ("Hello, Canvas!") on the canvas.
<canvas><canvas id="myCanvas" width="500" height="500" style="border:1px solid #000000;"></canvas>
Output: The red square moves across the canvas continuously. It resets once it moves out of view.
Explanation: The Geolocation API allows web applications to access the geographical location of the user’s device. It is commonly used in maps and location-based services.
<button onclick="getLocation()">Get My Location</button>
<p id="location"></p>
Output: Clicking the button will fetch and display the user's latitude and longitude.
Explanation: These allow storing data on the client side. localStorage persists data even after closing the browser, while sessionStorage clears the data once the session ends.
<button onclick="saveData()">Save Data</button>
<button onclick="loadData()">Load Data</button>
<p id="output"></p>
Output: Clicking "Save Data" stores data, and "Load Data" retrieves and displays it from both localStorage and sessionStorage.
Explanation: Web Workers allow you to run JavaScript in the background, without blocking the UI thread. They are great for performing time-consuming tasks like data processing.
<button onclick="startWorker()">Start Worker</button>
<button onclick="stopWorker()">Stop Worker</button>
Output: Clicking "Start Worker" creates a background task (worker) to process data, while "Stop Worker" terminates it.
Explanation: WebSockets provide real-time communication between the client and server. They allow you to send and receive messages over a persistent connection.
<button onclick="startSocket()">Start WebSocket</button>
<p id="message"></p>
Output: A WebSocket connection is established, and messages are sent and received in real-time.
Explanation: The Drag and Drop API allows you to create draggable elements and define drop zones on your web page.
<div id="drag" draggable="true" ondragstart="dragStart(event)">
Drag me!
</div>
<div id="dropZone" ondrop="drop(event)" ondragover="allowDrop(event)">
Drop here!
</div>
Output: Drag the "Drag me!" element and drop it into the "Drop here!" zone.