Home » Tutorials » HTML5
Category:

HTML5

HTML5

HTML5 WebRTC Tutorial

by shedders
written by shedders

WebRTC (Web Real-Time Communication) is a technology that enables real-time peer-to-peer communication between browsers and devices.

It supports audio, video, and data sharing without requiring plugins.

In this tutorial, you’ll learn:

  1. What is WebRTC and how it works.
  2. Setting up a basic WebRTC connection.
  3. Sharing audio and video streams.
  4. Sending data between peers using DataChannels.
  5. Practical examples and best practices.

1. What is WebRTC?

WebRTC allows direct communication between browsers or devices for tasks like:

  • Audio and video calls.
  • Live streaming.
  • File sharing.

Key Components:

  1. RTCPeerConnection: Manages connections and streams.
  2. MediaStream API: Captures media like audio or video.
  3. RTCDataChannel: Sends data between peers.

2. Setting Up a WebRTC Connection

To establish a WebRTC connection:

  1. Create Peer Connections: Use RTCPeerConnection on both peers.
  2. Exchange ICE Candidates: Share network information to establish a connection.
  3. Exchange Session Descriptions: Share offer/answer to establish communication.

Example 1: Basic WebRTC Setup

JavaScript

const configuration = {
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
};

const localConnection = new RTCPeerConnection(configuration);
const remoteConnection = new RTCPeerConnection(configuration);

// Handle ICE Candidates
localConnection.onicecandidate = (event) => {
    if (event.candidate) {
        remoteConnection.addIceCandidate(event.candidate);
    }
};

remoteConnection.onicecandidate = (event) => {
    if (event.candidate) {
        localConnection.addIceCandidate(event.candidate);
    }
};

// Handle Connection
remoteConnection.ondatachannel = (event) => {
    const receiveChannel = event.channel;
    receiveChannel.onmessage = (e) => console.log("Message from Local:", e.data);
};

// Create DataChannel
const dataChannel = localConnection.createDataChannel("chat");
dataChannel.onopen = () => console.log("DataChannel Opened");
dataChannel.onmessage = (e) => console.log("Message from Remote:", e.data);

// Create Offer
localConnection.createOffer().then((offer) => {
    localConnection.setLocalDescription(offer);
    remoteConnection.setRemoteDescription(offer);

    return remoteConnection.createAnswer();
}).then((answer) => {
    remoteConnection.setLocalDescription(answer);
    localConnection.setRemoteDescription(answer);
});

// Send a Message
setTimeout(() => {
    dataChannel.send("Hello, WebRTC!");
}, 2000);

Explanation:

  1. STUN Server: Helps discover public IP addresses for NAT traversal.
  2. RTCPeerConnection: Establishes a connection between peers.
  3. DataChannel: Sends and receives messages.

3. Sharing Audio and Video Streams

WebRTC allows you to share media streams using the getUserMedia API.

Example 2: Audio/Video Communication

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC Audio/Video</title>
</head>
<body>
    <h1>WebRTC Video Call</h1>
    <video id="localVideo" autoplay muted playsinline></video>
    <video id="remoteVideo" autoplay playsinline></video>
    <script src="videoRTC.js"></script>
</body>
</html>

JavaScript (videoRTC.js)

const configuration = {
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
};

const localVideo = document.getElementById("localVideo");
const remoteVideo = document.getElementById("remoteVideo");

const localConnection = new RTCPeerConnection(configuration);
const remoteConnection = new RTCPeerConnection(configuration);

// Add ICE Candidates
localConnection.onicecandidate = (event) => {
    if (event.candidate) {
        remoteConnection.addIceCandidate(event.candidate);
    }
};

remoteConnection.onicecandidate = (event) => {
    if (event.candidate) {
        localConnection.addIceCandidate(event.candidate);
    }
};

// Add Remote Stream
remoteConnection.ontrack = (event) => {
    remoteVideo.srcObject = event.streams[0];
};

// Capture Local Media
navigator.mediaDevices.getUserMedia({ video: true, audio: true }).then((stream) => {
    localVideo.srcObject = stream;

    // Add Tracks to the Local Connection
    stream.getTracks().forEach((track) => localConnection.addTrack(track, stream));

    // Create Offer
    localConnection.createOffer().then((offer) => {
        localConnection.setLocalDescription(offer);
        remoteConnection.setRemoteDescription(offer);

        return remoteConnection.createAnswer();
    }).then((answer) => {
        remoteConnection.setLocalDescription(answer);
        localConnection.setRemoteDescription(answer);
    });
}).catch((error) => {
    console.error("Error accessing media devices:", error);
});

Explanation:

  1. getUserMedia: Captures video/audio streams from the user’s device.
  2. addTrack: Adds media tracks to the connection.
  3. ontrack: Receives media tracks from the remote peer.

4. Sending Data Using DataChannels

WebRTC supports peer-to-peer data transfer using RTCDataChannel.

Example 3: Chat Application with DataChannel

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebRTC Chat</title>
</head>
<body>
    <h1>WebRTC Chat</h1>
    <textarea id="chatLog" rows="10" cols="50" readonly></textarea><br>
    <input id="message" type="text" placeholder="Type a message">
    <button id="send">Send</button>
    <script src="chatRTC.js"></script>
</body>
</html>

JavaScript (chatRTC.js)

const configuration = {
    iceServers: [{ urls: "stun:stun.l.google.com:19302" }]
};

const chatLog = document.getElementById("chatLog");
const messageInput = document.getElementById("message");
const sendButton = document.getElementById("send");

const localConnection = new RTCPeerConnection(configuration);
const remoteConnection = new RTCPeerConnection(configuration);

localConnection.onicecandidate = (event) => {
    if (event.candidate) {
        remoteConnection.addIceCandidate(event.candidate);
    }
};

remoteConnection.onicecandidate = (event) => {
    if (event.candidate) {
        localConnection.addIceCandidate(event.candidate);
    }
};

// Setup DataChannel
const dataChannel = localConnection.createDataChannel("chat");
dataChannel.onmessage = (event) => {
    chatLog.value += `Remote: ${event.data}\n`;
};

remoteConnection.ondatachannel = (event) => {
    const receiveChannel = event.channel;
    receiveChannel.onmessage = (event) => {
        chatLog.value += `Remote: ${event.data}\n`;
    };
};

// Create Offer
localConnection.createOffer().then((offer) => {
    localConnection.setLocalDescription(offer);
    remoteConnection.setRemoteDescription(offer);

    return remoteConnection.createAnswer();
}).then((answer) => {
    remoteConnection.setLocalDescription(answer);
    localConnection.setRemoteDescription(answer);
});

// Send Message
sendButton.addEventListener("click", () => {
    const message = messageInput.value;
    chatLog.value += `You: ${message}\n`;
    dataChannel.send(message);
    messageInput.value = "";
});

Explanation:

  1. dataChannel.send(data): Sends data to the remote peer.
  2. onmessage: Listens for incoming messages.

5. Practical Example: File Sharing

Use RTCDataChannel to send files between peers.

Example 4: File Sharing

  • dataChannel.send(file.slice(start, end)): Splits large files into chunks for transmission.

6. Best Practices

  1. Use STUN/TURN Servers:
    • STUN: Discovers public IP.
    • TURN: Relays traffic if direct communication fails.
  2. Handle Errors Gracefully:
    • Check for media permissions and network availability.
  3. Security:
    • Use HTTPS for secure connections.
    • Verify the identity of peers.
  4. Test Network Conditions:
    • Simulate various network environments for better performance.

7. Browser Support

Feature Chrome Firefox Safari Edge
WebRTC Yes Yes Yes Yes
DataChannel Yes Yes Yes Yes
Audio/Video Yes Yes Yes Yes

8. Conclusion

In this tutorial, you learned:

  1. The basics of WebRTC.
  2. How to create a peer connection.
  3. How to share audio, video, and data using WebRTC.

WebRTC is a powerful tool for real-time communication.

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Web Messaging Tutorial

by shedders
written by shedders

Web Messaging in HTML5 allows communication between browser contexts such as iframes, tabs, windows, or workers. It enables secure and efficient messaging between these contexts, overcoming the limitations of the Same-Origin Policy.

In this tutorial, you’ll learn:

  1. What is Web Messaging?
  2. Using postMessage for communication.
  3. Sending messages between iframes and windows.
  4. Using Web Messaging with Web Workers.
  5. Practical examples and best practices.

1. What is Web Messaging?

Web Messaging provides APIs for communication:

  • postMessage API: Sends messages between windows, iframes, or other contexts.
  • Message Events: Listen for and handle incoming messages.

Key Features:

  • Cross-Origin Communication: Securely exchange messages between origins.
  • Asynchronous: Messages are exchanged asynchronously.
  • Secure: You can verify the origin of the message.

2. Using postMessage for Communication

Example 1: Basic Communication Between Parent and Child

Step 1: Parent Window (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Parent Window</title>
</head>
<body>
    <h1>Parent Window</h1>
    <button id="sendMessage">Send Message to Child</button>
    <iframe id="childFrame" src="child.html" style="width: 100%; height: 300px;"></iframe>

    <script>
        const iframe = document.getElementById("childFrame");
        const sendMessageButton = document.getElementById("sendMessage");

        sendMessageButton.addEventListener("click", () => {
            iframe.contentWindow.postMessage("Hello from Parent!", "*");
        });

        // Listen for messages from the child
        window.addEventListener("message", (event) => {
            console.log("Message from Child:", event.data);
        });
    </script>
</body>
</html>

Step 2: Child Window (child.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Child Window</title>
</head>
<body>
    <h1>Child Window</h1>
    <p>Listening for messages from the parent...</p>

    <script>
        // Listen for messages from the parent
        window.addEventListener("message", (event) => {
            console.log("Message from Parent:", event.data);

            // Send a response back to the parent
            event.source.postMessage("Hello from Child!", event.origin);
        });
    </script>
</body>
</html>

Explanation:

  • postMessage(message, targetOrigin): Sends a message to the specified target.
  • message: The data to send.
  • targetOrigin: The expected origin of the target window for security.
  • message event: Handles incoming messages.

3. Sending Messages Between Tabs

Example 2: Communicating Between Browser Tabs

Step 1: Sender Tab

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sender Tab</title>
</head>
<body>
    <h1>Sender Tab</h1>
    <button id="sendMessage">Send Message to Receiver</button>

    <script>
        const receiverUrl = "receiver.html";
        const receiverTab = window.open(receiverUrl, "_blank");

        document.getElementById("sendMessage").addEventListener("click", () => {
            receiverTab.postMessage("Hello from Sender Tab!", "*");
        });
    </script>
</body>
</html>

Step 2: Receiver Tab (receiver.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Receiver Tab</title>
</head>
<body>
    <h1>Receiver Tab</h1>
    <p>Listening for messages from the sender tab...</p>

    <script>
        window.addEventListener("message", (event) => {
            console.log("Message from Sender Tab:", event.data);
        });
    </script>
</body>
</html>

4. Web Messaging with Web Workers

Web Workers can exchange messages with the main thread using postMessage.

Example 3: Main Thread and Worker Communication

Step 1: Worker Script (worker.js)

// worker.js
self.onmessage = function (event) {
    console.log("Message from Main Thread:", event.data);
    const result = `Processed: ${event.data}`;
    self.postMessage(result);
};

Step 2: Main Thread (HTML)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker Messaging</title>
</head>
<body>
    <h1>Web Worker Messaging</h1>
    <button id="sendToWorker">Send to Worker</button>
    <p id="output">Result: </p>

    <script>
        const worker = new Worker("worker.js");
        const output = document.getElementById("output");

        document.getElementById("sendToWorker").addEventListener("click", () => {
            worker.postMessage("Hello Worker!");
        });

        worker.onmessage = function (event) {
            output.textContent = `Result: ${event.data}`;
        };
    </script>
</body>
</html>

Explanation:

  • worker.postMessage(data): Sends data to the worker.
  • self.onmessage: Listens for messages in the worker.
  • self.postMessage(data): Sends data back to the main thread.

5. Practical Application: Cross-Origin Messaging

You can securely communicate between two origins using the postMessage API.

Example 4: Secure Cross-Origin Communication

Step 1: Parent Window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Secure Parent</title>
</head>
<body>
    <h1>Secure Parent</h1>
    <button id="sendMessage">Send Secure Message</button>
    <iframe id="childFrame" src="https://example.com/child.html" style="width: 100%; height: 300px;"></iframe>

    <script>
        const iframe = document.getElementById("childFrame");

        document.getElementById("sendMessage").addEventListener("click", () => {
            iframe.contentWindow.postMessage("Secure message from Parent", "https://example.com");
        });

        window.addEventListener("message", (event) => {
            if (event.origin !== "https://example.com") {
                console.warn("Origin not trusted:", event.origin);
                return;
            }
            console.log("Message from Child:", event.data);
        });
    </script>
</body>
</html>

Step 2: Child Window (https://example.com/child.html)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Secure Child</title>
</head>
<body>
    <h1>Secure Child</h1>
    <p>Listening for secure messages...</p>

    <script>
        window.addEventListener("message", (event) => {
            if (event.origin !== "https://trustedparent.com") {
                console.warn("Untrusted origin:", event.origin);
                return;
            }

            console.log("Message from Parent:", event.data);

            // Send a secure response
            event.source.postMessage("Secure response from Child", event.origin);
        });
    </script>
</body>
</html>

Explanation:

  • Always verify the origin of incoming messages to ensure secure communication.
  • Use specific target origins instead of “*” in postMessage.

6. Best Practices

  1. Verify Origins: Always check the origin of the message.
  2. Use Secure Connections: Use HTTPS to prevent man-in-the-middle attacks.
  3. Avoid Global Handlers: Use scoped listeners where possible.
  4. Sanitize Messages: Avoid injecting untrusted data into the DOM.

7. Browser Support

Browser Support
Google Chrome Yes
Firefox Yes
Safari Yes
Microsoft Edge Yes
Internet Explorer Partial

8. Conclusion

In this tutorial, you learned:

  1. How to use postMessage for Web Messaging.
  2. Communication between iframes, windows, and tabs.
  3. How to securely exchange messages across origins.
  4. Using Web Messaging with Web Workers.

Web Messaging is a powerful tool for creating interactive and secure web applications.

 

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 IndexedDB Tutorial

by shedders
written by shedders

IndexedDB is a low-level API for storing structured data in the browser. It allows you to store large amounts of data and retrieve it efficiently using key-value pairs.

Unlike localStorage, IndexedDB is asynchronous and supports advanced features like transactions, indexing, and searching.

In this tutorial, you’ll learn:

  1. What is IndexedDB and its benefits.
  2. Setting up and creating a database.
  3. Performing CRUD (Create, Read, Update, Delete) operations.
  4. Using indexes for efficient data retrieval.
  5. Practical examples with IndexedDB.

1. What is IndexedDB?

IndexedDB is:

  • Asynchronous: Operates without blocking the main thread.
  • Persistent: Stores data even after the browser is closed.
  • Structured: Supports objects, arrays, and complex data types.
  • Powerful: Offers transactions, versioning, and indexing for fast lookups.

Use Cases:

  • Offline web applications.
  • Storing large datasets like user preferences, chat history, or product catalogs.
  • Caching API responses.

2. Setting Up IndexedDB

Example 1: Creating a Database

// Open or create a database
const request = indexedDB.open("MyDatabase", 1);

// Handle success
request.onsuccess = function (event) {
    console.log("Database opened successfully:", event.target.result);
};

// Handle errors
request.onerror = function (event) {
    console.error("Database error:", event.target.error);
};

// Set up the database structure
request.onupgradeneeded = function (event) {
    const db = event.target.result;

    // Create an object store with a key path
    const store = db.createObjectStore("Users", { keyPath: "id" });

    // Create indexes for quick lookups
    store.createIndex("name", "name", { unique: false });
    store.createIndex("email", "email", { unique: true });

    console.log("Object store and indexes created.");
};

Explanation:

  • indexedDB.open(“MyDatabase”, version): Opens or creates a database with the specified version.
  • onupgradeneeded: Triggered if the database needs a new schema.

3. Performing CRUD Operations

Example 2: Adding Data to IndexedDB

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function (event) {
    const db = event.target.result;

    // Start a transaction
    const transaction = db.transaction("Users", "readwrite");
    const store = transaction.objectStore("Users");

    // Add data
    store.add({ id: 1, name: "John Doe", email: "john@example.com" });
    store.add({ id: 2, name: "Jane Smith", email: "jane@example.com" });

    transaction.oncomplete = function () {
        console.log("Data added successfully.");
    };

    transaction.onerror = function (event) {
        console.error("Transaction error:", event.target.error);
    };
};

Explanation:

  • transaction.objectStore(name): Accesses the specified object store.
  • store.add(data): Adds data to the store.

Example 3: Reading Data from IndexedDB

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function (event) {
    const db = event.target.result;

    // Start a transaction
    const transaction = db.transaction("Users", "readonly");
    const store = transaction.objectStore("Users");

    // Get a specific item by key
    const getRequest = store.get(1);
    getRequest.onsuccess = function (event) {
        console.log("Retrieved data:", event.target.result);
    };

    getRequest.onerror = function (event) {
        console.error("Get request error:", event.target.error);
    };
};

Explanation:

  • store.get(key): Retrieves an item by its key.

Example 4: Updating Data in IndexedDB

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function (event) {
    const db = event.target.result;

    // Start a transaction
    const transaction = db.transaction("Users", "readwrite");
    const store = transaction.objectStore("Users");

    // Update an existing item
    const updateRequest = store.put({ id: 1, name: "John Doe", email: "john.doe@example.com" });

    updateRequest.onsuccess = function () {
        console.log("Data updated successfully.");
    };

    updateRequest.onerror = function (event) {
        console.error("Update error:", event.target.error);
    };
};

Explanation:

  • store.put(data): Updates or adds data if the key already exists.

Example 5: Deleting Data from IndexedDB

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function (event) {
    const db = event.target.result;

    // Start a transaction
    const transaction = db.transaction("Users", "readwrite");
    const store = transaction.objectStore("Users");

    // Delete an item by key
    const deleteRequest = store.delete(1);

    deleteRequest.onsuccess = function () {
        console.log("Data deleted successfully.");
    };

    deleteRequest.onerror = function (event) {
        console.error("Delete error:", event.target.error);
    };
};

Explanation:

  • store.delete(key): Deletes an item by its key.

4. Using Indexes

Indexes allow you to query data efficiently.

Example 6: Querying Data by Index

const request = indexedDB.open("MyDatabase", 1);

request.onsuccess = function (event) {
    const db = event.target.result;

    // Start a transaction
    const transaction = db.transaction("Users", "readonly");
    const store = transaction.objectStore("Users");
    const index = store.index("email");

    // Get an item by index
    const indexRequest = index.get("jane@example.com");

    indexRequest.onsuccess = function (event) {
        console.log("Queried data:", event.target.result);
    };

    indexRequest.onerror = function (event) {
        console.error("Index query error:", event.target.error);
    };
};

Explanation:

  • store.index(name): Accesses an index.
  • index.get(value): Retrieves data based on an indexed value.

5. Deleting an Object Store

To delete an object store, update the database schema.

Example 7: Delete an Object Store

const request = indexedDB.open("MyDatabase", 2);

request.onupgradeneeded = function (event) {
    const db = event.target.result;

    // Delete an existing object store
    if (db.objectStoreNames.contains("Users")) {
        db.deleteObjectStore("Users");
        console.log("Object store deleted.");
    }
};

6. Practical Application: Todo App

Example 8: A Simple Todo App with IndexedDB

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IndexedDB Todo App</title>
</head>
<body>
    <h1>Todo App</h1>
    <input type="text" id="todoInput" placeholder="Enter a todo">
    <button id="addTodo">Add Todo</button>
    <ul id="todoList"></ul>

    <script src="todoApp.js"></script>
</body>
</html>

JavaScript (todoApp.js)

const request = indexedDB.open("TodoDB", 1);

request.onupgradeneeded = function (event) {
    const db = event.target.result;
    db.createObjectStore("Todos", { keyPath: "id", autoIncrement: true });
};

request.onsuccess = function (event) {
    const db = event.target.result;

    const addTodo = () => {
        const todoInput = document.getElementById("todoInput");
        const transaction = db.transaction("Todos", "readwrite");
        const store = transaction.objectStore("Todos");

        store.add({ text: todoInput.value });
        todoInput.value = "";
        displayTodos();
    };

    const displayTodos = () => {
        const transaction = db.transaction("Todos", "readonly");
        const store = transaction.objectStore("Todos");

        const todoList = document.getElementById("todoList");
        todoList.innerHTML = "";

        store.openCursor().onsuccess = function (event) {
            const cursor = event.target.result;
            if (cursor) {
                const li = document.createElement("li");
                li.textContent = cursor.value.text;
                todoList.appendChild(li);
                cursor.continue();
            }
        };
    };

    document.getElementById("addTodo").addEventListener("click", addTodo);
    displayTodos();
};

7. Best Practices

  1. Use Transactions: Always use transactions for consistency.
  2. Handle Errors: Provide meaningful error messages.
  3. Schema Versioning: Use the version parameter to manage schema changes.
  4. Browser Compatibility: Test your application across different browsers.

8. Conclusion

In this tutorial, you learned:

  1. How to set up and use IndexedDB.
  2. CRUD operations and using indexes for efficient queries.
  3. How to apply IndexedDB in a practical example like a Todo App.

IndexedDB is a powerful tool for building offline-capable and data-intensive web applications.

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Web Workers Tutorial

by shedders
written by shedders

Web Workers in HTML5 provide a way to run JavaScript in the background, independently of the user interface. This allows you to perform computationally intensive tasks without blocking the main thread, ensuring a smooth user experience.

In this tutorial, you’ll learn:

  1. What are Web Workers?
  2. Setting up a Web Worker.
  3. Sending and receiving messages.
  4. Using Web Workers for intensive tasks.
  5. Advanced use cases and best practices.

1. What Are Web Workers?

Web Workers enable background threads to run JavaScript code:

  • Dedicated Workers: Used by a single script.
  • Shared Workers: Can be shared between multiple scripts.
  • Service Workers: Specialized workers for caching and offline capabilities (beyond the scope of this tutorial).

Benefits:

  • Keeps the main thread free for UI updates.
  • Ideal for tasks like data processing, mathematical computations, or fetching data.

2. Setting Up a Web Worker

Basic Example: Dedicated Web Worker

Web Workers are created in a separate JavaScript file and communicated with using postMessage and onmessage.

Step 1: Create the Worker Script (worker.js)

// worker.js
self.onmessage = function (e) {
    const result = e.data * 2; // Example: Multiply input by 2
    self.postMessage(result);
};

Step 2: Use the Worker in Your HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Web Worker Example</title>
</head>
<body>
    <h1>Basic Web Worker</h1>
    <input type="number" id="inputNumber" placeholder="Enter a number">
    <button id="startWorker">Start Worker</button>
    <p id="output">Result: </p>

    <script>
        const worker = new Worker('worker.js');
        const inputNumber = document.getElementById('inputNumber');
        const output = document.getElementById('output');
        const startWorker = document.getElementById('startWorker');

        startWorker.addEventListener('click', () => {
            const number = parseInt(inputNumber.value, 10);
            if (isNaN(number)) {
                output.textContent = 'Please enter a valid number.';
                return;
            }

            // Send data to the worker
            worker.postMessage(number);

            // Receive the result from the worker
            worker.onmessage = function (e) {
                output.textContent = `Result: ${e.data}`;
            };
        });
    </script>
</body>
</html>

Explanation:

  • postMessage(data): Sends data to the worker.
  • onmessage: Listens for messages from the worker.
  • self.postMessage(data): Sends data back to the main script.

3. Using Web Workers for Intensive Tasks

Web Workers shine when performing CPU-intensive tasks, such as computing large numbers.

Example: Prime Number Checker

Step 1: Worker Script (primeWorker.js)

// primeWorker.js
self.onmessage = function (e) {
    const num = e.data;
    let isPrime = true;

    if (num < 2) isPrime = false;
    for (let i = 2; i <= Math.sqrt(num); i++) {
        if (num % i === 0) {
            isPrime = false;
            break;
        }
    }

    self.postMessage(isPrime ? `${num} is a prime number` : `${num} is not a prime number`);
};

Step 2: Main HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Prime Number Checker</title>
</head>
<body>
    <h1>Prime Number Checker</h1>
    <input type="number" id="number" placeholder="Enter a number">
    <button id="checkPrime">Check Prime</button>
    <p id="result">Result: </p>

    <script>
        const worker = new Worker('primeWorker.js');
        const numberInput = document.getElementById('number');
        const checkPrime = document.getElementById('checkPrime');
        const result = document.getElementById('result');

        checkPrime.addEventListener('click', () => {
            const number = parseInt(numberInput.value, 10);
            if (isNaN(number)) {
                result.textContent = 'Please enter a valid number.';
                return;
            }

            worker.postMessage(number);

            worker.onmessage = function (e) {
                result.textContent = `Result: ${e.data}`;
            };
        });
    </script>
</body>
</html>

Explanation:

  • The worker performs the prime number calculation in the background.
  • The UI remains responsive even for large numbers.

4. Terminating a Web Worker

You can terminate a worker when it’s no longer needed using the terminate method.

Example: Terminate a Worker

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Terminate Worker</title>
</head>
<body>
    <h1>Terminate Worker Example</h1>
    <button id="startWorker">Start Worker</button>
    <button id="stopWorker">Stop Worker</button>
    <p id="output">Result: </p>

    <script>
        let worker;

        document.getElementById('startWorker').addEventListener('click', () => {
            worker = new Worker('worker.js');
            worker.postMessage(5);

            worker.onmessage = function (e) {
                document.getElementById('output').textContent = `Result: ${e.data}`;
            };
        });

        document.getElementById('stopWorker').addEventListener('click', () => {
            if (worker) {
                worker.terminate();
                document.getElementById('output').textContent = 'Worker terminated.';
                worker = null;
            }
        });
    </script>
</body>
</html>

Explanation:

  • terminate: Stops the worker, releasing resources.

5. Using Web Workers with Multiple Tasks

Example: Multiple Tasks in a Single Worker

You can use messages to distinguish between tasks.

Worker Script (multiTaskWorker.js)

self.onmessage = function (e) {
    const { task, data } = e.data;

    if (task === 'square') {
        self.postMessage(`Square of ${data} is ${data * data}`);
    } else if (task === 'cube') {
        self.postMessage(`Cube of ${data} is ${data * data * data}`);
    }
};

HTML File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Multi-Task Worker</title>
</head>
<body>
    <h1>Multi-Task Worker Example</h1>
    <input type="number" id="number" placeholder="Enter a number">
    <button id="squareTask">Calculate Square</button>
    <button id="cubeTask">Calculate Cube</button>
    <p id="output">Result: </p>

    <script>
        const worker = new Worker('multiTaskWorker.js');
        const numberInput = document.getElementById('number');
        const output = document.getElementById('output');

        document.getElementById('squareTask').addEventListener('click', () => {
            const number = parseInt(numberInput.value, 10);
            worker.postMessage({ task: 'square', data: number });
        });

        document.getElementById('cubeTask').addEventListener('click', () => {
            const number = parseInt(numberInput.value, 10);
            worker.postMessage({ task: 'cube', data: number });
        });

        worker.onmessage = function (e) {
            output.textContent = `Result: ${e.data}`;
        };
    </script>
</body>
</html>

Explanation:

  • Pass a task identifier in the message to handle multiple tasks.

6. Best Practices for Web Workers

  1. Offload Heavy Tasks: Use workers for CPU-intensive tasks only.
  2. Keep Workers Lightweight: Avoid bloated scripts; workers are sandboxed and do not have access to the DOM.
  3. Use Termination: Always terminate workers when no longer needed.
  4. Test Browser Support: Ensure Web Worker compatibility across browsers.

7. Browser Support

Browser Support
Google Chrome Yes
Firefox Yes
Safari Yes
Microsoft Edge Yes
Internet Explorer Partial (IE10+)

8. Conclusion

In this tutorial, you learned:

  1. How to set up and use Web Workers.
  2. How to handle communication between the main thread and workers.
  3. Use cases like prime number checking and multi-task workers.
  4. Best practices for efficient worker usage.

Web Workers are a powerful feature in HTML5 that enhances performance and responsiveness.

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Drag & Drop Tutorial

by shedders
written by shedders

The HTML5 Drag & Drop API allows users to drag and drop elements within a webpage or between applications. This feature can be used for creating interactive interfaces like file uploads, sortable lists, or custom drag-and-drop interactions.

In this tutorial, you’ll learn:

  1. What is the Drag & Drop API?
  2. How to enable drag-and-drop functionality.
  3. Dragging and dropping elements.
  4. Practical examples of drag-and-drop.
  5. Advanced use cases and best practices.

1. What is the Drag & Drop API?

The Drag & Drop API consists of several events and methods:

  • Events: dragstart, dragover, drop, dragend, etc.
  • Attributes: draggable enables an element to be draggable.
  • Data Transfer: The dataTransfer object is used to store and transfer data during drag operations.

2. Basic Drag & Drop

Example 1: Simple Drag & Drop

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Drag & Drop</title>
    <style>
        #dragItem {
            width: 100px;
            height: 100px;
            background-color: blue;
            color: white;
            text-align: center;
            line-height: 100px;
            cursor: grab;
        }

        #dropZone {
            width: 200px;
            height: 200px;
            border: 2px dashed gray;
            text-align: center;
            line-height: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Basic Drag & Drop</h1>
    <div id="dragItem" draggable="true">Drag Me</div>
    <div id="dropZone">Drop Here</div>

    <script>
        const dragItem = document.getElementById("dragItem");
        const dropZone = document.getElementById("dropZone");

        // Handle drag start
        dragItem.addEventListener("dragstart", (e) => {
            e.dataTransfer.setData("text/plain", "This is a draggable item.");
        });

        // Allow drop by preventing the default behavior
        dropZone.addEventListener("dragover", (e) => {
            e.preventDefault();
        });

        // Handle drop
        dropZone.addEventListener("drop", (e) => {
            e.preventDefault();
            const data = e.dataTransfer.getData("text/plain");
            dropZone.textContent = `Dropped: ${data}`;
        });
    </script>
</body>
</html>

Explanation:

  1. The draggable attribute makes the item draggable.
  2. dragstart: Sets data to transfer when dragging starts.
  3. dragover: Prevents the default to allow a drop.
  4. drop: Handles the data when the item is dropped.

3. Drag & Drop with Multiple Items

Example 2: Drag Multiple Items into a Zone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Drag Multiple Items</title>
    <style>
        .draggable {
            width: 100px;
            height: 100px;
            margin: 10px;
            text-align: center;
            line-height: 100px;
            background-color: lightblue;
            display: inline-block;
            cursor: grab;
        }

        #dropZone {
            width: 300px;
            height: 300px;
            border: 2px dashed gray;
            text-align: center;
            line-height: 300px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Drag Multiple Items</h1>
    <div class="draggable" draggable="true" id="item1">Item 1</div>
    <div class="draggable" draggable="true" id="item2">Item 2</div>
    <div class="draggable" draggable="true" id="item3">Item 3</div>
    <div id="dropZone">Drop Items Here</div>

    <script>
        const items = document.querySelectorAll(".draggable");
        const dropZone = document.getElementById("dropZone");

        // Attach dragstart event to each draggable item
        items.forEach((item) => {
            item.addEventListener("dragstart", (e) => {
                e.dataTransfer.setData("text/plain", e.target.id);
            });
        });

        // Allow drop
        dropZone.addEventListener("dragover", (e) => {
            e.preventDefault();
        });

        // Handle drop
        dropZone.addEventListener("drop", (e) => {
            e.preventDefault();
            const id = e.dataTransfer.getData("text/plain");
            const draggedElement = document.getElementById(id);
            dropZone.appendChild(draggedElement);
        });
    </script>
</body>
</html>

Explanation:

  • Multiple elements are draggable.
  • Dragged items are appended to the drop zone upon dropping.

4. Sorting a List Using Drag & Drop

Example 3: Sortable List

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sortable List</title>
    <style>
        ul {
            list-style: none;
            padding: 0;
        }

        li {
            margin: 5px 0;
            padding: 10px;
            background-color: lightgray;
            cursor: grab;
        }
    </style>
</head>
<body>
    <h1>Sortable List</h1>
    <ul id="sortableList">
        <li draggable="true">Item 1</li>
        <li draggable="true">Item 2</li>
        <li draggable="true">Item 3</li>
        <li draggable="true">Item 4</li>
    </ul>

    <script>
        const list = document.getElementById("sortableList");
        let draggedItem = null;

        list.addEventListener("dragstart", (e) => {
            draggedItem = e.target;
            e.target.style.opacity = 0.5;
        });

        list.addEventListener("dragend", (e) => {
            e.target.style.opacity = "";
        });

        list.addEventListener("dragover", (e) => {
            e.preventDefault();
            const currentItem = e.target;
            if (currentItem.tagName === "LI" && currentItem !== draggedItem) {
                const bounding = currentItem.getBoundingClientRect();
                const offset = e.clientY - bounding.top + bounding.height / 2;
                if (offset > 0) {
                    currentItem.after(draggedItem);
                } else {
                    currentItem.before(draggedItem);
                }
            }
        });
    </script>
</body>
</html>

Explanation:

  • dragstart and dragend: Handle the visual feedback when dragging starts and ends.
  • dragover: Determines the position of the dragged item relative to the target.

5. Drag & Drop Files

HTML5 Drag & Drop can also handle file uploads.

Example 4: Drag & Drop File Upload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>File Upload</title>
    <style>
        #dropZone {
            width: 300px;
            height: 200px;
            border: 2px dashed gray;
            text-align: center;
            line-height: 200px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Drag & Drop File Upload</h1>
    <div id="dropZone">Drop Files Here</div>
    <ul id="fileList"></ul>

    <script>
        const dropZone = document.getElementById("dropZone");
        const fileList = document.getElementById("fileList");

        // Prevent default drag behaviors
        ["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
            dropZone.addEventListener(eventName, (e) => e.preventDefault());
        });

        // Highlight drop zone on dragover
        dropZone.addEventListener("dragover", () => {
            dropZone.style.borderColor = "blue";
        });

        // Reset drop zone on dragleave
        dropZone.addEventListener("dragleave", () => {
            dropZone.style.borderColor = "gray";
        });

        // Handle file drop
        dropZone.addEventListener("drop", (e) => {
            const files = e.dataTransfer.files;
            for (const file of files) {
                const li = document.createElement("li");
                li.textContent = file.name;
                fileList.appendChild(li);
            }
            dropZone.style.borderColor = "gray";
        });
    </script>
</body>
</html>

Explanation:

  • e.dataTransfer.files: Contains the files dropped onto the zone.
  • The files are listed dynamically in the <ul>.

6. Best Practices

  1. Provide Visual Feedback:
    • Use CSS to highlight the drop zone when dragging.
  2. Support Accessibility:
    • Provide alternative ways (e.g., buttons) for users who cannot drag and drop.
  3. Validate Input:
    • Validate dropped data (e.g., file types) to ensure security.
  4. Test Across Browsers:
    • Drag & Drop behaviors can vary slightly between browsers.

7. Conclusion

In this tutorial, you learned:

  1. The basics of HTML5 Drag & Drop API.
  2. How to create interactive drag-and-drop interfaces.
  3. Advanced use cases like sorting lists and file uploads.
  4. Best practices for improving the user experience.
0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Microdata Tutorial

by shedders
written by shedders

Microdata is a feature in HTML5 that helps to embed structured data within your web pages.

It allows you to describe your content more clearly to search engines and other applications, enhancing SEO and enabling rich snippets in search results.

In this tutorial, you’ll learn:

  1. What Microdata is and its purpose.
  2. How to use Microdata in HTML5.
  3. Practical examples using common vocabularies like Schema.org.
  4. Best practices for using Microdata.

1. What is Microdata?

Microdata allows you to embed structured metadata into your HTML content. It uses:

  • itemscope: Defines an item.
  • itemtype: Specifies the type of the item (usually a vocabulary like Schema.org).
  • itemprop: Specifies a property of the item.

Why Use Microdata?

  • Improves SEO: Helps search engines better understand your content.
  • Rich Snippets: Enables search engines to display rich, interactive snippets.
  • Standardized Structure: Makes your content machine-readable.

2. Basic Structure of Microdata

Syntax

<div itemscope itemtype="http://schema.org/Type">
    <span itemprop="propertyName">Property Value</span>
</div>

3. Example 1: Adding Microdata to a Web Page

Let’s mark up information about a book.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example - Book</title>
</head>
<body>
    <h1>Book Information</h1>
    <div itemscope itemtype="http://schema.org/Book">
        <h2 itemprop="name">The Great Gatsby</h2>
        <p>Author: <span itemprop="author">F. Scott Fitzgerald</span></p>
        <p>Published: <span itemprop="datePublished">1925</span></p>
        <p>Publisher: <span itemprop="publisher">Charles Scribner's Sons</span></p>
        <p>ISBN: <span itemprop="isbn">978-0743273565</span></p>
    </div>
</body>
</html>

Explanation:

  • itemscope: Declares a Microdata item (in this case, a book).
  • itemtype: Specifies the type of the item (http://schema.org/Book).
  • itemprop: Specifies the properties of the book, such as name, author, and datePublished.

4. Example 2: Adding Microdata for a Person

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example - Person</title>
</head>
<body>
    <h1>Person Information</h1>
    <div itemscope itemtype="http://schema.org/Person">
        <p>Name: <span itemprop="name">John Doe</span></p>
        <p>Job Title: <span itemprop="jobTitle">Software Engineer</span></p>
        <p>Email: <span itemprop="email">johndoe@example.com</span></p>
        <p>Website: <a href="https://johndoe.com" itemprop="url">johndoe.com</a></p>
    </div>
</body>
</html>

Explanation:

  • The Person type from Schema.org is used to describe a person’s details like name, job title, email, and website.

5. Nesting Microdata

You can nest Microdata items to describe more complex relationships.

Example 3: Nesting Microdata for a Product and Review

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example - Product and Review</title>
</head>
<body>
    <h1>Product Information</h1>
    <div itemscope itemtype="http://schema.org/Product">
        <h2 itemprop="name">Smartphone XYZ</h2>
        <p>Description: <span itemprop="description">A high-end smartphone with 128GB storage.</span></p>
        <p>Price: $<span itemprop="price">799</span></p>
        <p>Currency: <span itemprop="priceCurrency">USD</span></p>
        
        <div itemprop="review" itemscope itemtype="http://schema.org/Review">
            <p>Review by: <span itemprop="author">Jane Smith</span></p>
            <p>Rating: <span itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
                <span itemprop="ratingValue">4.5</span> / 5
            </span></p>
            <p>Review Text: <span itemprop="reviewBody">Excellent smartphone with great performance!</span></p>
        </div>
    </div>
</body>
</html>

Explanation:

  • Nested Microdata: The Product type contains a nested Review type, which in turn contains a nested Rating type.
  • Each itemscope declares a new Microdata item.

6. Practical Examples

Example 4: Adding Microdata for a Local Business

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example - Local Business</title>
</head>
<body>
    <h1>Business Information</h1>
    <div itemscope itemtype="http://schema.org/LocalBusiness">
        <h2 itemprop="name">The Coffee Corner</h2>
        <p>Address: <span itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
            <span itemprop="streetAddress">123 Main St</span>, 
            <span itemprop="addressLocality">Springfield</span>, 
            <span itemprop="addressRegion">IL</span>, 
            <span itemprop="postalCode">62701</span>
        </span></p>
        <p>Phone: <span itemprop="telephone">(555) 123-4567</span></p>
        <p>Website: <a href="https://coffeecorner.com" itemprop="url">coffeecorner.com</a></p>
    </div>
</body>
</html>

Explanation:

  • PostalAddress: Nested inside the LocalBusiness type to describe the address.

Example 5: Adding Breadcrumb Navigation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Microdata Example - Breadcrumbs</title>
</head>
<body>
    <nav itemscope itemtype="http://schema.org/BreadcrumbList">
        <ul>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="/" itemprop="item"><span itemprop="name">Home</span></a>
                <meta itemprop="position" content="1">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="/category" itemprop="item"><span itemprop="name">Category</span></a>
                <meta itemprop="position" content="2">
            </li>
            <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a href="/category/item" itemprop="item"><span itemprop="name">Item</span></a>
                <meta itemprop="position" content="3">
            </li>
        </ul>
    </nav>
</body>
</html>

Explanation:

  • BreadcrumbList: Represents a navigation breadcrumb.
  • ListItem: Each breadcrumb step is a list item with a position.

7. Testing Microdata

How to Test Microdata:

  • Use Google’s Rich Results Test: Rich Results Test
  • Inspect your page’s Microdata structure for errors and validate the content.

8. Best Practices for Microdata

  1. Use Standard Vocabularies: Schema.org is the most widely supported vocabulary.
  2. Keep It Human-Readable: Ensure the HTML remains readable for users.
  3. Validate Regularly: Check for errors using testing tools.
  4. Focus on Relevant Data: Only mark up data that adds value for search engines or users.
  5. Avoid Keyword Stuffing: Don’t misuse Microdata to manipulate rankings.

9. Conclusion

In this tutorial, you learned:

  1. The basics of HTML5 Microdata and its syntax.
  2. How to add Microdata for books, people, products, reviews, businesses, and breadcrumbs.
  3. How to use nested Microdata for complex relationships.
  4. Best practices for implementing Microdata.

Microdata helps search engines understand your content better and can significantly improve your website’s SEO and visibility.

 

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Server-Sent Events (SSE) Tutorial

by shedders
written by shedders

Server-Sent Events (SSE) is a technology in HTML5 that allows servers to push updates to the client over a single, long-lived HTTP connection. Unlike WebSockets, which provide full-duplex communication, SSE is one-way: data flows from the server to the client.

In this tutorial, you’ll learn:

  1. What Server-Sent Events are.
  2. How to set up SSE.
  3. How to implement an SSE server.
  4. How to use SSE in HTML5.
  5. Practical examples of SSE.

1. What are Server-Sent Events?

SSE is designed for real-time updates like:

  • Notifications
  • Live sports scores
  • Stock price updates
  • Chat applications (receive-only messages)

SSE uses the EventSource API on the client side to receive data from the server.

Advantages of SSE:

  • Built-in browser support.
  • Uses HTTP/1.1 for easy integration with existing servers.
  • Automatically reconnects if the connection drops.

2. Setting Up Server-Sent Events

SSE requires:

  1. A server that sends data using a specific MIME type (text/event-stream).
  2. A client that listens for events using the EventSource API.

3. Implementing an SSE Server

Example 1: Simple Node.js Server

// Install Node.js if not already installed

const http = require("http");

const server = http.createServer((req, res) => {
    if (req.url === "/events") {
        // Set the headers for SSE
        res.writeHead(200, {
            "Content-Type": "text/event-stream",
            "Cache-Control": "no-cache",
            "Connection": "keep-alive",
        });

        // Send an initial message
        res.write("data: Hello, this is a Server-Sent Event!\n\n");

        // Send messages every 3 seconds
        let count = 0;
        const interval = setInterval(() => {
            count++;
            res.write(`data: Message ${count} at ${new Date().toLocaleTimeString()}\n\n`);
        }, 3000);

        // Cleanup when the connection is closed
        req.on("close", () => {
            clearInterval(interval);
            res.end();
        });
    } else {
        res.writeHead(404);
        res.end("Not Found");
    }
});

server.listen(8080, () => {
    console.log("SSE server running at http://localhost:8080");
});

Explanation:

  • Content-Type: text/event-stream: Specifies the MIME type for SSE.
  • data: <message>: Sends a message.
  • Double newline (\n\n): Indicates the end of a message.

4. Using SSE in HTML5

The client-side implementation uses the EventSource API to receive updates.

Example 2: Basic SSE Client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Server-Sent Events</title>
</head>
<body>
    <h1>Server-Sent Events Example</h1>
    <div id="messages">Waiting for messages...</div>

    <script>
        // Create a new EventSource instance
        const eventSource = new EventSource("http://localhost:8080/events");

        // Listen for messages from the server
        eventSource.onmessage = (event) => {
            const messages = document.getElementById("messages");
            const newMessage = document.createElement("p");
            newMessage.textContent = event.data;
            messages.appendChild(newMessage);
        };

        // Handle errors
        eventSource.onerror = () => {
            console.error("EventSource connection error.");
        };
    </script>
</body>
</html>

Explanation:

  • new EventSource(url): Connects to the server.
  • onmessage: Handles messages received from the server.
  • event.data: Contains the server-sent message.

5. Sending Custom Events

SSE supports named events for better control.

Example 3: Custom Event Names on the Server

Modify the Node.js server to send named events:

res.write("event: customEvent\n");
res.write("data: This is a custom event!\n\n");

Example 4: Listening to Custom Events on the Client

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom SSE Events</title>
</head>
<body>
    <h1>Custom Server-Sent Events</h1>
    <div id="messages">Waiting for messages...</div>

    <script>
        const eventSource = new EventSource("http://localhost:8080/events");

        // Listen for custom events
        eventSource.addEventListener("customEvent", (event) => {
            const messages = document.getElementById("messages");
            const newMessage = document.createElement("p");
            newMessage.textContent = `Custom Event: ${event.data}`;
            messages.appendChild(newMessage);
        });

        eventSource.onerror = () => {
            console.error("EventSource connection error.");
        };
    </script>
</body>
</html>

Explanation:

  • event: <event-name>: Specifies the event name.
  • addEventListener: Listens for specific event names.

6. Reconnection Handling

The browser automatically reconnects if the connection drops. You can control this using the retry field.

Example 5: Setting Reconnection Interval

Modify the Node.js server:

res.write("retry: 5000\n"); // Retry every 5 seconds
res.write("data: Reconnection test\n\n");

Explanation:

  • retry: <milliseconds>: Sets the reconnection interval.

7. Practical Application: Live Notifications

Example 6: Live Notification System

Server (Node.js):

const http = require("http");

let clients = [];

const server = http.createServer((req, res) => {
    if (req.url === "/events") {
        res.writeHead(200, {
            "Content-Type": "text/event-stream",
            "Cache-Control": "no-cache",
            "Connection": "keep-alive",
        });

        clients.push(res);

        req.on("close", () => {
            clients = clients.filter(client => client !== res);
        });
    } else if (req.url === "/notify") {
        clients.forEach((client) => {
            client.write(`data: New notification at ${new Date().toLocaleTimeString()}\n\n`);
        });
        res.writeHead(200);
        res.end("Notification sent!");
    } else {
        res.writeHead(404);
        res.end("Not Found");
    }
});

server.listen(8080, () => {
    console.log("SSE notification server running at http://localhost:8080");
});

Client:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Live Notifications</title>
</head>
<body>
    <h1>Live Notifications</h1>
    <div id="notifications">No notifications yet...</div>

    <script>
        const eventSource = new EventSource("http://localhost:8080/events");

        eventSource.onmessage = (event) => {
            const notifications = document.getElementById("notifications");
            const newNotification = document.createElement("p");
            newNotification.textContent = event.data;
            notifications.appendChild(newNotification);
        };

        eventSource.onerror = () => {
            console.error("EventSource connection error.");
        };
    </script>
</body>
</html>

8. Best Practices

  1. Fallback Mechanism:
    • Use polling for browsers that do not support SSE (e.g., Internet Explorer).
  2. Limit Connections:
    • Handle multiple connections carefully to avoid overwhelming the server.
  3. Security:
    • Use HTTPS for secure connections.
    • Validate incoming data to prevent injection attacks.

9. Browser Support

Browser Support for SSE
Google Chrome Yes
Firefox Yes
Safari Yes
Microsoft Edge Yes (Chromium-based)
Internet Explorer No

10. Conclusion

In this tutorial, you learned:

  1. How Server-Sent Events work.
  2. How to create an SSE server with Node.js.
  3. How to use the EventSource API in HTML5.
  4. Practical examples like live notifications and custom events.

SSE is ideal for real-time, one-way data streaming. It’s simple to implement and works seamlessly for live updates.

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Geolocation Tutorial

by shedders
written by shedders

HTML5 Geolocation allows web applications to access the geographical location of a user’s device with their consent.

This is useful for building location-based services such as maps, weather updates, and geotagging.

In this tutorial, you’ll learn:

  1. What is Geolocation?
  2. How to use the Geolocation API.
  3. Displaying the user’s location.
  4. Handling errors and fallback options.
  5. Practical examples of Geolocation.

1. What is Geolocation?

The Geolocation API allows websites to retrieve the user’s location (latitude and longitude). However:

  • User permission is required for access.
  • Accuracy depends on the device’s GPS, Wi-Fi, IP address, or cellular data.

Common Use Cases:

  • Locating nearby services or points of interest.
  • Providing turn-by-turn navigation.
  • Displaying weather based on location.
  • Geotagging photos or activities.

2. Basic Geolocation API

Syntax

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options);
  • getCurrentPosition: Retrieves the user’s current position.
  • successCallback: A function executed when the location is successfully retrieved.
  • errorCallback: A function executed if an error occurs.
  • options: Optional parameters to customize location retrieval.

Example 1: Basic Geolocation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Geolocation</title>
</head>
<body>
    <h1>Get User Location</h1>
    <button onclick="getLocation()">Get My Location</button>
    <p id="output">Click the button to get your location.</p>

    <script>
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const { latitude, longitude } = position.coords;
                        document.getElementById('output').textContent =
                            `Latitude: ${latitude}, Longitude: ${longitude}`;
                    },
                    (error) => {
                        document.getElementById('output').textContent = `Error: ${error.message}`;
                    }
                );
            } else {
                document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
            }
        }
    </script>
</body>
</html>

Explanation:

  • position.coords.latitude and position.coords.longitude: Retrieve the user’s latitude and longitude.
  • Handles errors if location services are denied or unavailable.

3. Displaying the Location on a Map

Use services like Google Maps or OpenStreetMap to visualize the user’s location.

Example 2: Show Location on Google Maps

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geolocation on Google Maps</title>
</head>
<body>
    <h1>My Location on Google Maps</h1>
    <button onclick="showMap()">Show My Location</button>
    <p id="output">Click the button to find your location.</p>
    <iframe id="map" width="600" height="450" style="border:0; display:none;"></iframe>

    <script>
        function showMap() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const { latitude, longitude } = position.coords;
                        document.getElementById('output').textContent =
                            `Latitude: ${latitude}, Longitude: ${longitude}`;
                        
                        const mapUrl = `https://www.google.com/maps/embed/v1/view?key=YOUR_API_KEY&center=${latitude},${longitude}&zoom=14`;
                        const map = document.getElementById('map');
                        map.src = mapUrl;
                        map.style.display = "block";
                    },
                    (error) => {
                        document.getElementById('output').textContent = `Error: ${error.message}`;
                    }
                );
            } else {
                document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
            }
        }
    </script>
</body>
</html>

Explanation:

  • Replace YOUR_API_KEY with your Google Maps API key.
  • The user’s location is embedded into a Google Map iframe.

4. Watching Position (Real-Time Updates)

You can track the user’s movement using the watchPosition method.

Example 3: Real-Time Position Updates

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Real-Time Geolocation</title>
</head>
<body>
    <h1>Track My Location</h1>
    <button onclick="startTracking()">Start Tracking</button>
    <button onclick="stopTracking()">Stop Tracking</button>
    <p id="output">Press "Start Tracking" to track your location.</p>

    <script>
        let watchID;

        function startTracking() {
            if (navigator.geolocation) {
                watchID = navigator.geolocation.watchPosition(
                    (position) => {
                        const { latitude, longitude } = position.coords;
                        document.getElementById('output').textContent =
                            `Latitude: ${latitude}, Longitude: ${longitude}`;
                    },
                    (error) => {
                        document.getElementById('output').textContent = `Error: ${error.message}`;
                    }
                );
            } else {
                document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
            }
        }

        function stopTracking() {
            if (watchID) {
                navigator.geolocation.clearWatch(watchID);
                document.getElementById('output').textContent = "Tracking stopped.";
            }
        }
    </script>
</body>
</html>

Explanation:

  • watchPosition: Monitors the user’s location continuously.
  • clearWatch: Stops the real-time tracking.

5. Handling Errors and Options

Example 4: Customizing Error Handling and Options

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Geolocation with Options</title>
</head>
<body>
    <h1>Customized Geolocation</h1>
    <button onclick="getCustomLocation()">Get My Location</button>
    <p id="output">Click the button to get your location.</p>

    <script>
        function getCustomLocation() {
            const options = {
                enableHighAccuracy: true, // Use GPS for high accuracy
                timeout: 5000,           // Wait up to 5 seconds
                maximumAge: 0            // Do not use cached location
            };

            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(
                    (position) => {
                        const { latitude, longitude, accuracy } = position.coords;
                        document.getElementById('output').textContent =
                            `Latitude: ${latitude}, Longitude: ${longitude}, Accuracy: ${accuracy} meters`;
                    },
                    (error) => {
                        switch (error.code) {
                            case error.PERMISSION_DENIED:
                                document.getElementById('output').textContent = "Permission denied by the user.";
                                break;
                            case error.POSITION_UNAVAILABLE:
                                document.getElementById('output').textContent = "Position unavailable.";
                                break;
                            case error.TIMEOUT:
                                document.getElementById('output').textContent = "Request timed out.";
                                break;
                            default:
                                document.getElementById('output').textContent = "An unknown error occurred.";
                        }
                    },
                    options
                );
            } else {
                document.getElementById('output').textContent = "Geolocation is not supported by this browser.";
            }
        }
    </script>
</body>
</html>

Explanation:

  • enableHighAccuracy: Requests more precise location data (e.g., GPS).
  • timeout: Sets the maximum wait time for a location response.
  • maximumAge: Specifies the age of cached data that is acceptable.

6. Practical Application: Find Nearby Services

You can combine Geolocation with APIs like Google Places or OpenStreetMap to find nearby services (e.g., restaurants, gas stations).

7. Best Practices

  1. Request Permission Respectfully:
    • Explain why location data is needed to the user.
  2. Handle Errors Gracefully:
    • Provide meaningful error messages.
  3. Minimize Accuracy Requests:
    • Use high accuracy only when necessary, as it consumes more battery.

Conclusion

In this tutorial, you learned:

  1. How to use the Geolocation API to get the user’s location.
  2. How to track real-time movement.
  3. How to handle errors and customize location retrieval.
  4. How to display location on maps.

The HTML5 Geolocation API is a powerful tool for creating location-aware applications.

 

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Audio & Video Tutorial

by shedders
written by shedders

HTML5 introduced the <audio> and <video> elements, allowing developers to embed multimedia directly into web pages without requiring external plugins like Flash.

These elements provide built-in controls, flexible APIs, and support for multiple file formats.

In this tutorial, you’ll learn how to:

  1. Use the <audio> and <video> elements.
  2. Add controls and attributes.
  3. Work with multiple file formats.
  4. Use JavaScript to control media playback.
  5. Customize media players with CSS and JavaScript.

1. The <audio> Element

The <audio> element embeds audio content into a webpage.

Example 1: Basic Audio Player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Audio Player</title>
</head>
<body>
    <h1>Basic Audio Example</h1>
    <audio controls>
        <source src="example-audio.mp3" type="audio/mpeg">
        <source src="example-audio.ogg" type="audio/ogg">
        Your browser does not support the audio element.
    </audio>
</body>
</html>

Explanation:

  • <audio>: Embeds audio content.
  • controls: Displays playback controls (play, pause, volume).
  • <source>: Specifies the audio file and its format.

2. The <video> Element

The <video> element embeds video content into a webpage.

Example 2: Basic Video Player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Basic Video Player</title>
</head>
<body>
    <h1>Basic Video Example</h1>
    <video controls width="640" height="360">
        <source src="example-video.mp4" type="video/mp4">
        <source src="example-video.webm" type="video/webm">
        Your browser does not support the video element.
    </video>
</body>
</html>

Explanation:

  • <video>: Embeds video content.
  • controls: Adds playback controls.
  • width and height: Set the dimensions of the video.

3. Attributes for Audio and Video

You can customize audio and video elements using attributes.

Common Attributes:

Attribute Description
controls Adds default playback controls.
autoplay Automatically starts playback.
loop Loops the media playback.
muted Starts playback with the volume muted.
preload Controls how/when the file is loaded (auto, metadata, none).

Example 3: Media with Autoplay, Loop, and Muted

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Media Attributes</title>
</head>
<body>
    <h1>Audio and Video with Attributes</h1>

    <!-- Autoplay and Loop Audio -->
    <audio autoplay loop>
        <source src="background-music.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>

    <br><br>

    <!-- Muted Video with Loop -->
    <video autoplay loop muted width="640" height="360">
        <source src="looping-video.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</body>
</html>

4. Working with Multiple Formats

Different browsers support different formats. Use multiple <source> elements to ensure compatibility.

Common Formats:

Media Type Formats Supported
Audio MP3 (audio/mpeg), OGG (audio/ogg), WAV (audio/wav)
Video MP4 (video/mp4), WebM (video/webm), OGG (video/ogg)

5. Using JavaScript to Control Media

The Audio and Video elements expose methods and properties for programmatic control.

Example 4: JavaScript Control for Audio

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Audio Control</title>
</head>
<body>
    <h1>Audio Control Example</h1>
    <audio id="myAudio" src="example-audio.mp3"></audio>
    <button onclick="playAudio()">Play</button>
    <button onclick="pauseAudio()">Pause</button>
    <button onclick="stopAudio()">Stop</button>

    <script>
        const audio = document.getElementById("myAudio");

        function playAudio() {
            audio.play();
        }

        function pauseAudio() {
            audio.pause();
        }

        function stopAudio() {
            audio.pause();
            audio.currentTime = 0; // Reset to the start
        }
    </script>
</body>
</html>

Explanation:

  • play(): Starts playback.
  • pause(): Pauses playback.
  • currentTime: Sets the playback position.

Example 5: JavaScript Control for Video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript Video Control</title>
</head>
<body>
    <h1>Video Control Example</h1>
    <video id="myVideo" width="640" height="360" controls>
        <source src="example-video.mp4" type="video/mp4">
    </video>
    <br>
    <button onclick="playVideo()">Play</button>
    <button onclick="pauseVideo()">Pause</button>
    <button onclick="setVolume(0.5)">Set Volume to 50%</button>

    <script>
        const video = document.getElementById("myVideo");

        function playVideo() {
            video.play();
        }

        function pauseVideo() {
            video.pause();
        }

        function setVolume(value) {
            video.volume = value; // Value ranges from 0.0 to 1.0
        }
    </script>
</body>
</html>

Explanation:

  • volume: Adjusts the audio volume (0.0 to 1.0).

6. Customizing Media Players

You can hide the default controls and create your own media player using CSS and JavaScript.

Example 6: Custom Media Player

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Custom Media Player</title>
    <style>
        .custom-controls {
            margin-top: 10px;
        }
        .custom-controls button {
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <h1>Custom Media Player</h1>
    <video id="customVideo" width="640" height="360" src="example-video.mp4"></video>
    <div class="custom-controls">
        <button onclick="playCustom()">Play</button>
        <button onclick="pauseCustom()">Pause</button>
        <button onclick="restartCustom()">Restart</button>
    </div>

    <script>
        const customVideo = document.getElementById("customVideo");

        function playCustom() {
            customVideo.play();
        }

        function pauseCustom() {
            customVideo.pause();
        }

        function restartCustom() {
            customVideo.currentTime = 0;
            customVideo.play();
        }
    </script>
</body>
</html>

7. Streaming Media

For live or on-demand streaming, use services like HLS (HTTP Live Streaming) or DASH (Dynamic Adaptive Streaming over HTTP). These require additional libraries or server setups.

8. Accessibility Tips

  • Provide captions using <track>: 
    <video controls>
    <source src="example-video.mp4" type="video/mp4">
    <track src="subtitles.vtt" kind="subtitles" srclang="en" label="English">
</video>
  • Always include fallback text inside <audio> or <video> for unsupported browsers.

Conclusion

In this tutorial, you learned:

  1. How to use the <audio> and <video> elements.
  2. Common attributes like controls, autoplay, and loop.
  3. How to programmatically control media with JavaScript.
  4. How to customize a media player using CSS and JavaScript.

HTML5’s <audio> and <video> elements simplify embedding multimedia content, providing a rich user experience for modern web applications.

 

0 comment
0 FacebookTwitterPinterestEmail
HTML5

HTML5 Canvas Tutorial

by shedders
written by shedders

The HTML5 <canvas> element allows you to draw graphics on a webpage. It provides a powerful, low-level API for rendering 2D shapes, images, and animations.

In this tutorial, you’ll learn how to use the <canvas> element with examples covering drawing shapes, applying styles, handling animations, and more.

1. What is the <canvas> Element?

  • The <canvas> element creates a rectangular area on your webpage where graphics can be drawn using JavaScript.
  • It is resolution-dependent and does not provide any built-in drawing tools.
  • You use the Canvas API to draw and manipulate the canvas content.

2. Basic Canvas Setup

Example 1: Basic Canvas Element

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Basic Canvas</title>
</head>
<body>
    <h1>Basic Canvas Example</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
</body>
</html>

Explanation:

  • <canvas>: Creates a canvas with a width of 500px and height of 300px.
  • The canvas itself does not render any content. Use JavaScript to draw on it.

3. Drawing on the Canvas

You must obtain a 2D rendering context to draw on the canvas.

Example 2: Drawing a Rectangle

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Draw Rectangle</title>
</head>
<body>
    <h1>Canvas Rectangle</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        // Draw a filled rectangle
        ctx.fillStyle = "blue";
        ctx.fillRect(50, 50, 150, 100);

        // Draw a rectangle outline
        ctx.strokeStyle = "red";
        ctx.lineWidth = 5;
        ctx.strokeRect(250, 50, 150, 100);
    </script>
</body>
</html>

Explanation:

  • ctx.fillRect(x, y, width, height): Draws a filled rectangle.
  • ctx.strokeRect(x, y, width, height): Draws a rectangle outline.
  • fillStyle and strokeStyle: Set the fill and stroke colors.

4. Drawing Shapes

The Canvas API supports paths for drawing shapes like circles, lines, and polygons.

Example 3: Drawing a Circle and Line

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Shapes</title>
</head>
<body>
    <h1>Canvas Shapes</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        // Draw a circle
        ctx.beginPath();
        ctx.arc(150, 150, 50, 0, Math.PI * 2);
        ctx.fillStyle = "green";
        ctx.fill();

        // Draw a line
        ctx.beginPath();
        ctx.moveTo(300, 100);
        ctx.lineTo(400, 200);
        ctx.strokeStyle = "blue";
        ctx.lineWidth = 3;
        ctx.stroke();
    </script>
</body>
</html>

Explanation:

  • ctx.arc(x, y, radius, startAngle, endAngle): Draws a circle or arc.
  • ctx.moveTo(x, y) and ctx.lineTo(x, y): Define a line segment.

5. Adding Text to the Canvas

You can render text on the canvas using the fillText and strokeText methods.

Example 4: Adding Text

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Text</title>
</head>
<body>
    <h1>Canvas Text Example</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        // Draw filled text
        ctx.font = "30px Arial";
        ctx.fillStyle = "black";
        ctx.fillText("Hello Canvas!", 50, 100);

        // Draw outlined text
        ctx.strokeStyle = "red";
        ctx.strokeText("Outline Text", 50, 150);
    </script>
</body>
</html>

Explanation:

  • ctx.font: Sets the font size and family.
  • ctx.fillText(text, x, y): Renders filled text.
  • ctx.strokeText(text, x, y): Renders text outlines.

6. Drawing Images

You can draw images onto the canvas using the drawImage method.

Example 5: Drawing an Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Image</title>
</head>
<body>
    <h1>Canvas Image Example</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        const img = new Image();
        img.src = "https://via.placeholder.com/150";
        img.onload = () => {
            ctx.drawImage(img, 50, 50, 150, 150); // Draw the image at (50, 50)
        };
    </script>
</body>
</html>

Explanation:

  • ctx.drawImage(image, x, y, width, height): Draws an image onto the canvas.
  • The onload event ensures the image is fully loaded before being drawn.

7. Animating on the Canvas

You can create animations by repeatedly drawing and clearing the canvas.

Example 6: Animation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Animation</title>
</head>
<body>
    <h1>Canvas Animation</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        let x = 0;
        const y = 150;

        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
            ctx.beginPath();
            ctx.arc(x, y, 20, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
            x += 2; // Move the circle
            if (x > canvas.width) x = 0; // Reset if it goes off-screen
            requestAnimationFrame(draw); // Request the next frame
        }

        draw(); // Start the animation
    </script>
</body>
</html>

Explanation:

  • clearRect: Clears the canvas before redrawing.
  • requestAnimationFrame: Ensures smooth animations by syncing with the browser’s refresh rate.

8. Handling User Interaction

You can capture mouse events to make interactive graphics.

Example 7: Interactive Canvas

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Interactive Canvas</title>
</head>
<body>
    <h1>Interactive Canvas Example</h1>
    <canvas id="myCanvas" width="500" height="300" style="border: 1px solid black;"></canvas>
    <script>
        const canvas = document.getElementById("myCanvas");
        const ctx = canvas.getContext("2d");

        canvas.addEventListener("mousemove", (e) => {
            const rect = canvas.getBoundingClientRect();
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;

            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.beginPath();
            ctx.arc(x, y, 30, 0, Math.PI * 2);
            ctx.fillStyle = "blue";
            ctx.fill();
        });
    </script>
</body>
</html>

Explanation:

  • mousemove event: Tracks the mouse position on the canvas.
  • getBoundingClientRect: Gets the canvas’s position relative to the viewport.

9. Best Practices

  1. Optimize for Performance: Clear and redraw only what is necessary.
  2. Responsive Design: Use CSS or JavaScript to make the canvas adapt to screen size.
  3. Backup Content: Provide fallback content inside the <canvas> tag for browsers that do not support it.

Conclusion

In this tutorial, you learned:

  1. How to create and use the <canvas> element.
  2. How to draw shapes, text, and images on the canvas.
  3. How to add interactivity and animations.

The Canvas API is a versatile tool for creating graphics, animations, and interactive content.

 

0 comment
0 FacebookTwitterPinterestEmail
Newer Posts
Older Posts