Meet browser APIs: a preview of JavaScript

One idea at a time

This is an optional detour in the HTML sequence. The next lesson, special characters, does not depend on it. If you have not learned variables, functions, and click events yet, explore the visual examples and return to the code after the linked JavaScript lessons. You do not need browser APIs to finish your HTML page.

Continue with HTML special characters; return to APIs later →

An API is a set of operations a program can use. Browser APIs offer capabilities such as drawing and storing values. They are often called HTML5 APIs in older tutorials, but JavaScript calls these operations. HTML alone does not request a location or write a saved preference.

canvas creates a drawing surface. Its width and height define its drawing dimensions. JavaScript obtains a drawing context, an object containing drawing tools, and draws into that surface. The shapes are pixels, not heading or paragraph elements, so important information needs an accessible text equivalent as well.

Separate the surface from the instructions

Walk through an example

<canvas id="drawing" width="240" height="120" aria-label="A blue rectangle">A blue rectangle.</canvas>
<p>A blue rectangle is drawn near the upper-left corner.</p>
<script>
  const canvas = document.querySelector("#drawing");
  const context = canvas.getContext("2d");
  if (context) {
    context.fillStyle = "blue";
    context.fillRect(20, 20, 100, 60);
  }
</script>

The canvas exists before the script runs. querySelector finds it, getContext asks for the two-dimensional drawing tools, and the if statement checks that a context is available. fillStyle chooses the color. fillRect takes the left position, top position, width, and height in that order. The nearby text explains what the drawing communicates.

See it happen: try a small change

<canvas id="drawing" width="240" height="120" aria-label="Blue rectangle">Blue rectangle.</canvas>
<script>
const context = document.querySelector("#drawing").getContext("2d");
if (context) {
  context.fillStyle = "blue";
  context.fillRect(20, 20, 100, 60);
}
</script>

Storage and location have boundaries

localStorage stores text values under keys (names you choose). Storage is separated by origin: the address scheme, host, and port together, such as https://example.com. setItem writes a value, getItem reads it, and removeItem deletes it. A missing key returns null, a JavaScript value meaning no stored value was found. Storage is not an account or a database shared across devices. It can be cleared or unavailable, so real code must handle failure. Do not store sensitive information there.

Geolocation asks the browser for a position. It normally requires a secure context such as HTTPS, the user's permission, and success and error handling. Support does not guarantee permission or a usable result. Ask only after an intentional user action and explain why the location is needed. This lesson does not request your location.

The second interactive example is a labeled simulation of saving and reading a value, so it does not write to your device. It helps you predict the sequence before trying real storage in a local web project. The canvas example uses the actual browser canvas API. These two kinds of demonstration are identified explicitly.

<script>
  // Run from a web page after learning JavaScript.
  try {
    localStorage.setItem("notebook-topic", "plants");
    const topic = localStorage.getItem("notebook-topic");
    console.log(topic);
    localStorage.removeItem("notebook-topic");
  } catch {
    console.log("Storage is unavailable.");
  }
</script>

Try the save, read, and remove sequence

localStorage.setItem("notebook-topic", "plants");
localStorage.getItem("notebook-topic");
localStorage.removeItem("notebook-topic");

Try it in your browser

HTML beginners can stay in the embedded examples: switch the canvas variants and identify the surface and text alternative. You do not need to copy or troubleshoot the script yet. The storage example is a simulation and does not save anything. Return to the code after the linked prerequisite lessons; ordinary HTML lessons do not depend on it.

A common wrong turn

Do not treat a successful API call on your computer as a guarantee for every visitor. Permission, browser settings, and device capabilities can differ. HTML's presence does not remove the need for JavaScript error handling and useful alternatives.

Change one thing

Change the rectangle's horizontal position and compare it with changing its width. In the storage simulation, read before saving, then save, read, and remove. Predict each result first.

Go to the source

• MDN: Meet browser APIs: a preview of JavaScript ↗

Examples are authored for Tuklas and checked with code and reference documentation. This is not a claim of independent human review. Suggest a correction.