A Web API (Application Programming Interface) is a set of rules and protocols that allows one software application to interact with another over the Internet. In web development, APIs enable the front-end (what users see in the browser) to communicate with back-end servers or external services.

Key Types of Web APIs

• REST (Representational State Transfer): Lightweight, uses HTTP methods (GET, POST, PUT, DELETE) and returns data in JSON format. Most commonly used for web applications.
• SOAP: More rigid, uses XML messaging, often used in enterprise systems.
• GraphQL: Allows clients to request exactly the data they need, reducing over-fetching.

Why Web APIs Matter

Web APIs enable applications to access external services without needing to understand their internal code. For example, a weather application uses a weather API to fetch real-time data rather than maintaining its own weather database.

The Canvas API is a powerful HTML5 feature that allows developers to draw graphics, create animations, and build interactive visual elements directly in the browser using JavaScript.

Adding a Canvas to a Web Page

To use the Canvas API, first add the <canvas> element to your HTML:

<canvas id="myCanvas" width="500" height="400" style="border: 1px solid #000;"></canvas>

Drawing on the Canvas

The Canvas API provides methods for drawing shapes, lines, and text. Here is a basic example:

// Get the canvas element and its drawing context
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// Draw a rectangle
ctx.fillStyle = "#3498db"; // blue color
ctx.fillRect(50, 50, 200, 100);

// Draw a circle
ctx.beginPath();
ctx.arc(300, 200, 50, 0, 2 * Math.PI);
ctx.fillStyle = "#e74c3c"; // red color
ctx.fill();
ctx.closePath();

// Draw text
ctx.font = "20px Arial";
ctx.fillStyle = "#000";
ctx.fillText("My Canvas Drawing", 150, 350);

Canvas API Methods

Practical Canvas Use Case

A Tanzanian student could use the Canvas API to create an interactive quiz application where answers are revealed with animated transitions, or to build a simple drawing tool for art class projects.

The Drag and Drop API enables users to click and hold elements, drag them to new positions, and drop them—this creates interactive experiences like reordering lists, moving items between containers, or building sorting activities.

Implementing Drag and Drop

<!-- Draggable element -->
<div id="draggable" draggable="true">Drag me!</div>

<!-- Drop zone -->
<div id="dropzone" style="width: 200px; height: 100px; border: 2px dashed #333;">
  Drop here
</div>

const draggable = document.getElementById("draggable");
const dropzone = document.getElementById("dropzone");

// When dragging starts
draggable.addEventListener("dragstart", function(event) {
  event.dataTransfer.setData("text", event.target.id);
});

// When dragging over the drop zone
dropzone.addEventListener("dragover", function(event) {
  event.preventDefault(); // Allows dropping
});

// When dropped
dropzone.addEventListener("drop", function(event) {
  event.preventDefault();
  const data = event.dataTransfer.getData("text");
  const draggedElement = document.getElementById(data);
  dropzone.appendChild(draggedElement);
});

Key Drag and Drop Events

• dragstart: Fires when the user starts dragging an element
• dragover: Fires when a dragged element is over a drop zone (must call preventDefault() to allow dropping)
• drop: Fires when the element is released over the drop zone
• dragenter and dragleave: Fire when entering or leaving a drop zone

REST (Representational State Transfer) is an architectural style for designing networked applications. CRUD operations (Create, Read, Update, Delete) are the fundamental data operations that REST APIs support.

HTTP Methods and CRUD Mapping

Example: Using Fetch API for CRUD Operations

const apiURL = "https://jsonplaceholder.typicode.com/posts";

// CREATE (POST) - Add new data
async function createPost() {
  const response = await fetch(apiURL, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      title: "My New Post",
      body: "This is the content",
      userId: 1
    })
  });
  const data = await response.json();
  console.log("Created:", data);
}

// READ (GET) - Fetch data
async function getPosts() {
  const response = await fetch(apiURL);
  const data = await response.json();
  console.log("Posts:", data);
}

// UPDATE (PUT) - Modify existing data
async function updatePost(id) {
  const response = await fetch(`${apiURL}/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      id: id,
      title: "Updated Title",
      body: "Updated content",
      userId: 1
    })
  });
  const data = await response.json();
  console.log("Updated:", data);
}

// DELETE - Remove data
async function deletePost(id) {
  const response = await fetch(`${apiURL}/${id}`, {
    method: "DELETE"
  });
  console.log("Deleted:", response.status);
}

Client-Server Communication Flow

1. The client (browser) sends an HTTP request to the server
2. The request includes an HTTP method (GET, POST, PUT, or DELETE)
3. The server processes the request and performs the appropriate database operation
4. The server responds with status code and data (usually in JSON format)
5. The client receives the response and updates the UI

When working with APIs, applications must handle both successful responses and errors gracefully.

async function fetchData() {
  try {
    const response = await fetch("https://api.example.com/data");
    
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    
    const data = await response.json();
    console.log("Success:", data);
    
    // Update UI with data
    displayData(data);
    
  } catch (error) {
    console.error("Error:", error.message);
    // Display user-friendly error message
    showErrorMessage("Failed to load data. Please try again.");
  }
}

Common HTTP Status Codes

• 200 OK: Request succeeded
• 201 Created: New resource successfully created
• 400 Bad Request: Invalid client request
• 404 Not Found: Resource not found
• 500 Internal Server Error: Server-side problem

When accessing protected APIs, applications use authentication and authorization mechanisms:

• API Keys: Simple tokens included in requests to identify the client
• OAuth/OAuth2: Standard protocol for secure authorization
• Access Tokens: Short-lived tokens granted after successful authentication

Example of including an API key in a request:

const apiKey = "your_api_key_here";
fetch(`https://api.weather.com/data?city=Dar es Salaam&apikey=${apiKey}`)
  .then(response => response.json())
  .then(data => displayWeather(data));

In Tanzania, a small business owner in Arusha could use these web APIs to build an online inventory management system for their shop. The Canvas API could draw visual charts showing daily sales trends, the Drag and Drop API could let employees reorder products on virtual shelf displays, and REST APIs could connect to a mobile money API (like M-Pesa integration) to automatically sync sales data with their accounting software—making stock management faster and more accurate than using handwritten records.