Browser Aware

A minimal website that displays a dot and lines on a canvas. When multiple browser tabs of the site are open, each tab’s dot position is synchronized via localStorage events, and lines are drawn between dots to indicate their relative positions across tabs.

---

🧩 Features

• Single Dot Display
  Each tab shows exactly one dot

• Cross-Tab Synchronization
  Using localStorage, each tab knows the dot positions of every other open tab in real time (within browser limitations).

• Dynamic Line Drawing
  Lines are automatically drawn on each tab’s canvas between its own dot and all other dots, reflecting their accurate positions.

---

📂 Files

• index.html — Main page with the <canvas> element and inclusion of styles.css, app.js & math.js
• styles.css — Basic styling to center the canvas and reset body margins.
• app.js — Core logic for:
  1. Rendering the other dots
  2. Storing the dot’s position in localStorage under a unique key
  3. Update the position of the lines and dots at a fixed intervall
  4. Drawing lines between this tab’s dot and all other tabs’ dots

---

📷 Picture