Introduction to HTML APIs and Integration
Canvas, Geolocation, Drag & Drop, and JavaScript

HTML APIs and Integration: Supercharge Your Web Pages

HTML doesn’t stop at structure. When paired with APIs and JavaScript, it becomes a gateway to interactive, intelligent, and immersive experiences. In this guide, you'll learn how HTML integrates with modern browser APIs like Canvas, Drag-and-Drop, Geolocation, and more — all with beginner-friendly examples.

1. Canvas API Basics

The <canvas> element is used for drawing graphics via JavaScript — from shapes and images to charts and games.

Example: Drawing a Red Rectangle

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #ccc;"></canvas>

<script>
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
  ctx.fillStyle = 'red';
  ctx.fillRect(10, 10, 150, 75);
</script>

[ Red rectangle drawn on a 200x100 canvas ]

2. Drag and Drop API

This API enables draggable content. You can create visual interfaces where users drag cherries, drop files, or rearrange items.

Example: Drag an Image of a Banana

<img src="banana.png" id="banana" width="100" draggable="true">
<div id="dropArea" style="width:200px;height:100px;border:2px dashed #888">Drop here</div>

<script>
  const banana = document.getElementById('banana');
  const dropArea = document.getElementById('dropArea');

  banana.addEventListener('dragstart', e => e.dataTransfer.setData('text', 'banana'));
  dropArea.addEventListener('dragover', e => e.preventDefault());
  dropArea.addEventListener('drop', e => {
    e.preventDefault();
    dropArea.innerText = 'Banana dropped!';
  });
</script>

3. Geolocation API

Use this API to get the user's current location — with their permission. Great for weather apps, delivery tracking, and localized content.

Example: Show Latitude and Longitude

<button onclick="getLocation()">Get Location</button>
<p id="geoOutput"></p>

<script>
  function getLocation() {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(pos => {
        document.getElementById('geoOutput').innerText =
          'Latitude: ' + pos.coords.latitude + '\nLongitude: ' + pos.coords.longitude;
      });
    } else {
      document.getElementById('geoOutput').innerText = 'Geolocation not supported.';
    }
  }
</script>

Latitude: 17.385  
Longitude: 78.486

4. Embedding with <iframe>

The <iframe> tag lets you embed external content — like maps, YouTube videos, or internal widgets — into your HTML document.

Example: Embed a YouTube Video

<iframe width="400" height="225"
  src="https://www.youtube.com/embed/banana123"
  title="Banana Smoothie Tutorial"
  allowfullscreen>
</iframe>

5. HTML and JavaScript Integration

HTML provides the structure; JavaScript adds logic and interaction. You can access and modify HTML elements using JavaScript’s DOM API.

Example: Change Text on Button Click

<p id="fruit">I love apples.</p>
<button onclick="document.getElementById('fruit').innerText='I love cherries.'">Change Fruit</button>

[ Click button → "I love cherries." appears ]

Summary

HTML APIs are your window to richer, more meaningful user experiences. In this introduction, you learned how to:

• Draw and animate using the <canvas> API
• Enable visual interaction with the Drag-and-Drop API
• Use the Geolocation API for real-world location access
• Embed content with <iframe>
• Integrate JavaScript with HTML for dynamic content updates

What’s Next?

Coming up: Dive deeper into the Canvas API — learn how to draw shapes, work with images, and even create simple animations with JavaScript.