wickchart-sessions 0.1.0

package/README.md

@@ -0,0 +1,62 @@
+# wickchart-sessions
+
+Market session shading for [wickchart](https://github.com/benyblack/wickchart),
+as an opt-in plugin layer — the core stays session-free. Zero dependencies.
+
+Translucent session bands (Asia / London / New York, or your own definitions)
+under the price action, optional closed-weekend shading, and labels at the top
+of each band. Sessions are plain config: presets for crypto & forex use the
+common UTC convention; equity/futures presets use IANA timezones, so 09:30 is
+the real 09:30 across DST changes. Bands ride zoom & pan and hover events tell
+you which session the crosshair is in.
+
+```js
+npm install wickchart wickchart-sessions   // the plugin is a separate package
+
+import 'wickchart';                          // the chart itself
+import { attachSessions } from 'wickchart-sessions';
+
+const chart = document.querySelector('wick-chart');
+const sessions = attachSessions(chart, { preset: 'crypto' });
+
+sessions.setPreset('nyse');   // 'crypto' | 'forex' | 'nyse' | 'cme' | null
+sessions.setSessions([...]);  // custom defs — replaces the preset
+sessions.setWeekends(true);   // shade closed Sat+Sun (default for nyse/cme)
+sessions.setLabels(false);    // band labels at the top (default on)
+sessions.setOpacity(0.12);    // band fill alpha (default 0.08)
+sessions.detach();
+
+// which session is the crosshair in?
+chart.addEventListener('wick:sessions', (e) => status.textContent = e.detail.hover || '');
+```
+
+Custom defs — `{ name, start, end, tz?, days?, color?, alpha? }`:
+
+```js
+sessions.setSessions([
+  { name: 'NY RTH', start: '09:30', end: '16:00', tz: 'America/New_York',
+    days: [1, 2, 3, 4, 5], color: '#4c8dff' },        // DST-exact, weekdays
+  { name: 'Overnight', start: '18:00', end: '06:00', utcOffset: 0 }, // crosses midnight
+]);
+```
+
+- `end <= start` crosses midnight into the next day. `end: '24:00'` (or
+  `'00:00'`) ends at midnight.
+- `tz` is any IANA name (DST-aware); `utcOffset` is fixed minutes east of
+  UTC; neither means UTC.
+- `days` filters on the band's start weekday in the session timezone
+  (0 = Sunday).
+- `color` is a hex, or `up` / `down` / `accent` for theme colors; uncolored
+  sessions cycle through four default tints.
+- Defs are normalized and validated — invalid entries are dropped, never
+  thrown. `getSessions()` returns the active, JSON-serializable list.
+
+Presets: **crypto** (Asia 00–08, London 07–16, New York 12–21 UTC), **forex**
+(+ Sydney 21–06, Tokyo 00–09 UTC), **nyse** (09:30–16:00 America/New_York,
+weekdays, weekends shaded), **cme** (08:30–15:00 America/Chicago, weekdays,
+weekends shaded).
+
+The hover bridge listens to the chart's own crosshair events, so shading never
+claims a pointer gesture — pan/zoom/measure work untouched.
+
+Peer dependency: wickchart ≥ 1.4.0 (the plugin layer API).

package/core.mjs

@@ -0,0 +1,233 @@
+/**
+ * wickchart-sessions — pure session model: presets, normalization, timezone
+ * math and band computation. No DOM, no canvas; mirrors the host library's
+ * core discipline. Everything here is unit-testable plain data in / data out.
+ */
+
+export const PRESETS = {
+  // crypto runs 24/7; session times are the common UTC convention
+  crypto: [
+    { name: 'Asia', start: '00:00', end: '08:00' },
+    { name: 'London', start: '07:00', end: '16:00' },
+    { name: 'New York', start: '12:00', end: '21:00' },
+  ],
+  forex: [
+    { name: 'Sydney', start: '21:00', end: '06:00' },
+    { name: 'Tokyo', start: '00:00', end: '09:00' },
+    { name: 'London', start: '07:00', end: '16:00' },
+    { name: 'New York', start: '12:00', end: '21:00' },
+  ],
+  // equities/futures: DST-exact wall-clock times, weekdays only
+  nyse: [{ name: 'NYSE', start: '09:30', end: '16:00', tz: 'America/New_York', days: [1, 2, 3, 4, 5] }],
+  cme: [{ name: 'RTH', start: '08:30', end: '15:00', tz: 'America/Chicago', days: [1, 2, 3, 4, 5] }],
+};
+
+/** Presets that default to weekend shading (the market is actually closed). */
+export const WEEKEND_PRESETS = new Set(['nyse', 'cme']);
+
+/** Fill tints cycled per session — picked to read on both dark and light themes. */
+export const DEFAULT_COLORS = ['#4c8dff', '#f0b90b', '#16c784', '#a78bfa'];
+
+export const WEEKEND_COLOR = '#8b949e';
+
+const MAX_SESSIONS = 12;
+const MAX_NAME = 24;
+const DAY = 86_400_000;
+/** Session shading stops making visual sense far out; cap the day scan. */
+export const MAX_DAYS = 750;
+
+const HEX = /^#(?:[0-9a-f]{3}|[0-9a-f]{6})$/i;
+const HM = /^([01]?\d|2[0-4]):([0-5]\d)$/;
+
+const isNum = (v) => typeof v === 'number' && Number.isFinite(v);
+
+/** '09:30' → 570 minutes since midnight; '24:00' → 1440; else NaN. */
+export function parseHM(str) {
+  const m = typeof str === 'string' && HM.exec(str.trim());
+  if (!m) return NaN;
+  const h = Number(m[1]);
+  if (h === 24 && Number(m[2]) !== 0) return NaN; // '24:00' is midnight, '24:01' is nothing
+  return h * 60 + Number(m[2]);
+}
+
+function validTz(tz) {
+  if (typeof tz !== 'string' || !tz || tz.length > 40) return false;
+  try {
+    new Intl.DateTimeFormat('en-US', { timeZone: tz });
+    return true;
+  } catch (_) {
+    return false;
+  }
+}
+
+/**
+ * Validate + clamp a list of raw session defs into plain, serializable data.
+ * Invalid entries are dropped (never throw) — same contract as
+ * normalizeDrawings / normalizeOverlays in the host core.
+ *
+ * Session shape: { name, start: 'HH:MM', end: 'HH:MM', tz?: IANA name,
+ *   utcOffset?: minutes east of UTC, days?: [0..6] (0=Sun, in session tz),
+ *   color?: '#hex'|'up'|'down'|'accent', alpha?: 0..1 }.
+ * `end <= start` crosses midnight into the next day; neither tz nor
+ * utcOffset means UTC.
+ */
+export function normalizeSessions(list) {
+  if (!Array.isArray(list)) return [];
+  const out = [];
+  for (const raw of list) {
+    if (!raw || typeof raw !== 'object') continue;
+    if (out.length >= MAX_SESSIONS) break;
+    const name = typeof raw.name === 'string' ? raw.name.trim().slice(0, MAX_NAME) : '';
+    if (!name) continue;
+    // accepts raw defs ('09:30' strings) AND already-normalized defs (minute
+    // numbers), so the output of getSessions() is a valid setSessions() input
+    const startMin = isNum(raw.startMin) ? Math.round(raw.startMin) : parseHM(raw.start);
+    let endMin = isNum(raw.endMin) ? Math.round(raw.endMin) : parseHM(raw.end);
+    if (!isNum(startMin) || !isNum(endMin) || startMin < 0 || startMin > 1439 || endMin < 0 || endMin > 1440) continue;
+    if (endMin === 0) endMin = 1440; // end '00:00' = midnight, same as '24:00'
+    const tz = validTz(raw.tz) ? raw.tz : null;
+    const utcOffset = isNum(raw.utcOffset) ? Math.max(-720, Math.min(840, Math.round(raw.utcOffset))) : null;
+    let days = null;
+    if (Array.isArray(raw.days)) {
+      days = [...new Set(raw.days.filter((d) => Number.isInteger(d) && d >= 0 && d <= 6))].sort();
+      if (!days.length) days = null;
+    }
+    const color = typeof raw.color === 'string' && (['up', 'down', 'accent'].includes(raw.color) || HEX.test(raw.color))
+      ? raw.color
+      : null;
+    const alpha = isNum(raw.alpha) ? Math.max(0, Math.min(1, raw.alpha)) : null;
+    out.push({ name, startMin, endMin, tz, utcOffset, days, color, alpha });
+  }
+  return out;
+}
+
+/* ------------------------ timezone math ------------------------ */
+
+const dtfCache = new Map();
+
+function dtfFor(tz) {
+  let f = dtfCache.get(tz);
+  if (!f) {
+    f = new Intl.DateTimeFormat('en-US', {
+      timeZone: tz,
+      hourCycle: 'h23',
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+    dtfCache.set(tz, f);
+  }
+  return f;
+}
+
+/** Wall-clock parts {y, mo, d, hh, mm} of an epoch-ms instant in a tz. */
+function wallParts(at, tz) {
+  const parts = dtfFor(tz).formatToParts(new Date(at));
+  const get = (type) => Number(parts.find((p) => p.type === type).value);
+  return { y: get('year'), mo: get('month'), d: get('day'), hh: get('hour'), mm: get('minute') };
+}
+
+/** Offset east of UTC in minutes at instant `at` (DST-aware via Intl). */
+function tzOffsetMin(at, tz) {
+  const p = wallParts(at, tz);
+  return Math.round((Date.UTC(p.y, p.mo - 1, p.d, p.hh, p.mm) - at) / 60000);
+}
+
+const zonedCache = new Map();
+
+/**
+ * Epoch ms of "wall time `minutes` past midnight of UTC-date (y, mo, d) in
+ * tz". Guess-and-correct handles DST; per-(tz, date, minute) memoization
+ * keeps panning cheap (offsets repeat across days, Intl is the slow part).
+ */
+export function zonedToUtc(y, mo, d, minutes, tz) {
+  if (!tz) return Date.UTC(y, mo - 1, d, 0, minutes); // UTC (no Intl needed)
+  const key = tz + '|' + y + '-' + mo + '-' + d + '|' + minutes;
+  const hit = zonedCache.get(key);
+  if (hit != null) return hit;
+  const wall = Date.UTC(y, mo - 1, d, 0, minutes);
+  let g = wall;
+  for (let i = 0; i < 2; i++) {
+    g = wall - tzOffsetMin(g, tz) * 60000;
+  }
+  if (zonedCache.size > 8192) zonedCache.clear();
+  zonedCache.set(key, g);
+  return g;
+}
+
+/** 0=Sun..6=Sat of an instant's wall-clock date in a tz (UTC when no tz). */
+export function weekdayInTz(at, tz) {
+  if (!tz) return new Date(at).getUTCDay();
+  const p = wallParts(at, tz);
+  return new Date(Date.UTC(p.y, p.mo - 1, p.d)).getUTCDay();
+}
+
+/** utcOffset (minutes) form → same shape as tz form, minus the Intl work. */
+function fixedOffsetToUtc(y, mo, d, minutes, off) {
+  return Date.UTC(y, mo - 1, d, 0, minutes) - off * 60000;
+}
+
+/** Resolve a def's epoch start/end on one calendar date (UTC-anchored). */
+function defBoundsOn(def, y, mo, d) {
+  if (def.utcOffset != null) {
+    const endMin = def.endMin > def.startMin ? def.endMin : def.endMin + 1440;
+    return {
+      s: fixedOffsetToUtc(y, mo, d, def.startMin, def.utcOffset),
+      e: fixedOffsetToUtc(y, mo, d, endMin, def.utcOffset),
+      weekday: new Date(fixedOffsetToUtc(y, mo, d, 0, def.utcOffset)).getUTCDay(),
+    };
+  }
+  const s = zonedToUtc(y, mo, d, def.startMin, def.tz);
+  const e = zonedToUtc(y, mo, d, def.endMin > def.startMin ? def.endMin : def.endMin + 1440, def.tz);
+  return { s, e, weekday: weekdayInTz(s, def.tz) };
+}
+
+/**
+ * Session bands overlapping the window [t0, t1] (epoch ms): one entry per
+ * (def, day), clipped to the window. `end <= start` defs roll into the next
+ * day; `days` filters on the band's start weekday in the session timezone.
+ */
+export function bandsFor(defs, t0, t1) {
+  if (!Array.isArray(defs) || !defs.length || !isNum(t0) || !isNum(t1) || t1 <= t0) return [];
+  const out = [];
+  const startDay = Math.floor(t0 / DAY) - 2;
+  const endDay = Math.floor(t1 / DAY) + 2;
+  for (let day = startDay; day <= endDay && day - startDay < MAX_DAYS; day++) {
+    const base = new Date(day * DAY);
+    const y = base.getUTCFullYear();
+    const mo = base.getUTCMonth() + 1;
+    const d = base.getUTCDate();
+    for (const def of defs) {
+      const b = defBoundsOn(def, y, mo, d);
+      if (b.e <= b.s) continue;
+      if (def.days && !def.days.includes(b.weekday)) continue;
+      if (b.e > t0 && b.s < t1) out.push({ def, start: Math.max(b.s, t0), end: Math.min(b.e, t1) });
+    }
+  }
+  return out;
+}
+
+/**
+ * Weekend shading bands (Sat + Sun midnight-to-midnight in `tz`, merged
+ * into one band each): epoch ms entries clipped to [t0, t1].
+ */
+export function weekendBands(t0, t1, tz) {
+  if (!isNum(t0) || !isNum(t1) || t1 <= t0) return [];
+  const out = [];
+  const startDay = Math.floor(t0 / DAY) - 2;
+  const endDay = Math.floor(t1 / DAY) + 2;
+  for (let day = startDay; day <= endDay && day - startDay < MAX_DAYS; day++) {
+    const base = new Date(day * DAY);
+    const y = base.getUTCFullYear();
+    const mo = base.getUTCMonth() + 1;
+    const d = base.getUTCDate();
+    const zoned = tz ? zonedToUtc(y, mo, d, 0, tz) : day * DAY;
+    if (weekdayInTz(zoned, tz) !== 6) continue; // Saturdays only — each carries its own Sunday
+    const s = zoned;
+    const e = tz ? zonedToUtc(y, mo, d + 2, 0, tz) : s + 2 * DAY;
+    if (e > t0 && s < t1) out.push({ start: Math.max(s, t0), end: Math.min(e, t1) });
+  }
+  return out;
+}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "wickchart-sessions",
+  "version": "0.1.0",
+  "description": "Market session shading for wickchart — Asia/London/New York and custom sessions with DST-exact IANA timezones, weekend shading, crosshair hover events. Opt-in plugin, zero dependencies.",
+  "type": "module",
+  "main": "sessions.mjs",
+  "module": "sessions.mjs",
+  "exports": {
+    ".": "./sessions.mjs",
+    "./core": "./core.mjs"
+  },
+  "files": [
+    "sessions.mjs",
+    "core.mjs",
+    "README.md"
+  ],
+  "keywords": [
+    "chart",
+    "charting",
+    "sessions",
+    "trading",
+    "web-component",
+    "wickchart",
+    "canvas",
+    "crypto",
+    "forex",
+    "timezone"
+  ],
+  "license": "MIT",
+  "peerDependencies": {
+    "wickchart": ">=1.4.0"
+  },
+  "peerDependenciesMeta": {
+    "wickchart": {
+      "optional": true
+    }
+  }
+}

package/sessions.mjs

@@ -0,0 +1,253 @@
+/**
+ * wickchart-sessions — session shading as a wickchart plugin layer: Asia /
+ * London / New York and other market sessions drawn as translucent bands
+ * behind nothing but time, plus optional weekend shading for closed-market
+ * instruments. Sessions are plain config (preset or custom defs with IANA
+ * timezones — DST-exact), so they ride zoom & pan and serialize to JSON.
+ * The whole plugin builds on the public layer API (addLayer) and adds zero
+ * features to the core.
+ *
+ *   import { attachSessions } from 'wickchart-sessions';
+ *   const sessions = attachSessions(chart, { preset: 'crypto' });
+ *   sessions.setPreset('nyse');       // crypto | forex | nyse | cme | null
+ *   sessions.setSessions([...]);      // custom defs (see README) — wins over preset
+ *   sessions.setWeekends(true);       // shade closed weekends
+ *   sessions.setLabels(false);
+ *   sessions.detach();
+ *
+ * Events on the chart element:
+ *   wick:sessions { detail: { hover: name|null } } — the session under the
+ *   crosshair changed (bridged from the chart's own crosshair events, so
+ *   this layer never claims a pointer gesture)
+ */
+import {
+  PRESETS,
+  WEEKEND_PRESETS,
+  DEFAULT_COLORS,
+  WEEKEND_COLOR,
+  normalizeSessions,
+  bandsFor,
+  weekendBands,
+} from './core.mjs';
+
+const FONT = '600 10px ui-sans-serif, system-ui, sans-serif';
+const LABEL_MIN = 28; // px of band width below which labels are skipped
+
+const isNum = (v) => typeof v === 'number' && Number.isFinite(v);
+
+export function attachSessions(chart, opts = {}) {
+  return new SessionsLayer(chart, opts);
+}
+
+export class SessionsLayer {
+  constructor(chart, opts = {}) {
+    if (!chart || typeof chart.addLayer !== 'function') {
+      throw new TypeError('attachSessions(chart): the chart element is required');
+    }
+    this._chart = chart;
+    this._labels = opts.labels !== false;
+    this._alpha = isNum(opts.opacity) ? Math.max(0, Math.min(1, opts.opacity)) : 0.08;
+    this._weekendTz = typeof opts.weekendTz === 'string' ? opts.weekendTz : null;
+    this._preset = null;
+    this._defs = [];
+    this._weekends = false;
+    this._bands = []; // bands from the last render, for hover lookup
+    this._hover = null;
+    this._layer = { id: 'wick-sessions', draw: (api) => this._render(api) };
+    chart.addLayer(this._layer);
+    this._onCross = (e) => this._cross(e.detail);
+    chart.addEventListener('wick:crosshair', this._onCross);
+    if (opts.preset) this.setPreset(opts.preset);
+    if (opts.sessions) this.setSessions(opts.sessions);
+    if (opts.weekends != null) this.setWeekends(opts.weekends);
+  }
+
+  /* ---------------- public API ---------------- */
+
+  /**
+   * Apply a preset: 'crypto' | 'forex' | 'nyse' | 'cme' | null (none).
+   * nyse/cme default to weekend shading; pass `{ weekends: false }`… or
+   * call setWeekends(false) after.
+   */
+  setPreset(name, presetOpts = {}) {
+    if (name == null) {
+      this._preset = null;
+      this._defs = [];
+      this._redraw();
+      return this;
+    }
+    const defs = PRESETS[name];
+    if (!defs) return this;
+    this._preset = name;
+    this._defs = normalizeSessions(defs);
+    this._weekends = presetOpts.weekends != null ? presetOpts.weekends !== false : WEEKEND_PRESETS.has(name);
+    this._redraw();
+    return this;
+  }
+
+  get preset() {
+    return this._preset;
+  }
+
+  /** Replace the session defs with a custom list (invalid entries dropped). */
+  setSessions(list) {
+    this._preset = null;
+    this._defs = normalizeSessions(list);
+    this._redraw();
+    return this;
+  }
+
+  /** Deep copy of the active defs — JSON-serializable. */
+  getSessions() {
+    return this._defs.map((d) => ({ ...d, days: d.days ? [...d.days] : null }));
+  }
+
+  setLabels(on) {
+    this._labels = on !== false;
+    this._redraw();
+    return this;
+  }
+
+  get labels() {
+    return this._labels;
+  }
+
+  /** Shade closed weekends (Sat+Sun) in `tz` — defaults to the first session's tz. */
+  setWeekends(on, tz) {
+    this._weekends = on !== false;
+    if (typeof tz === 'string') this._weekendTz = tz;
+    this._redraw();
+    return this;
+  }
+
+  get weekends() {
+    return this._weekends;
+  }
+
+  /** Fill opacity for all bands (0..1; custom defs may override per-session). */
+  setOpacity(a) {
+    if (isNum(a)) this._alpha = Math.max(0, Math.min(1, a));
+    this._redraw();
+    return this;
+  }
+
+  detach() {
+    this._chart.removeEventListener('wick:crosshair', this._onCross);
+    try {
+      this._chart.removeLayer('wick-sessions');
+    } catch (_) {}
+    this._chart = null;
+  }
+
+  /* ---------------- hover (crosshair bridge) ---------------- */
+
+  _cross(detail) {
+    if (!this._chart) return;
+    let t = detail && detail.bar ? detail.bar.time : null;
+    if (!isNum(t)) t = null;
+    else if (t < 1e12) t *= 1000;
+    const name = t == null ? null : this._nameAt(t);
+    if (name !== this._hover) {
+      this._hover = name;
+      this._chart.dispatchEvent(new CustomEvent('wick:sessions', { detail: { hover: name } }));
+    }
+  }
+
+  _nameAt(t) {
+    for (const b of this._bands) {
+      if (b.def.name && t >= b.start && t < b.end) return b.def.name;
+    }
+    return null;
+  }
+
+  /* ---------------- render ---------------- */
+
+  _redraw() {
+    if (this._chart && typeof this._chart.requestDraw === 'function') this._chart.requestDraw();
+  }
+
+  _weekendTzResolved() {
+    if (this._weekendTz) return this._weekendTz;
+    return (this._defs[0] && this._defs[0].tz) || 'UTC';
+  }
+
+  _render(api) {
+    const { ctx, layout, palette: pal, data } = api;
+    this._bands = [];
+    if (!data.length || (!this._defs.length && !this._weekends)) return;
+    const main = layout.main;
+    const t0 = api.xToTime(0);
+    const t1 = api.xToTime(layout.plotRight);
+    if (!isNum(t0) || !isNum(t1) || t1 <= t0) return;
+
+    const bands = bandsFor(this._defs, t0, t1);
+    if (this._weekends) {
+      const wt = this._weekendTzResolved();
+      for (const b of weekendBands(t0, t1, wt)) {
+        bands.push({ def: { name: '', color: WEEKEND_COLOR, alpha: null }, start: b.start, end: b.end });
+      }
+    }
+    // weekends under sessions: draw gray first, session tints on top
+    bands.sort((a, b) => (a.def.name ? 1 : 0) - (b.def.name ? 1 : 0));
+    // uncolored sessions cycle through the default tints, in def order
+    const tint = new Map();
+    this._defs.forEach((d, i) => {
+      if (!d.color) tint.set(d, DEFAULT_COLORS[i % DEFAULT_COLORS.length]);
+    });
+    this._bands = bands;
+    if (!bands.length) return;
+
+    ctx.save();
+    ctx.beginPath();
+    ctx.rect(0, main.y0, layout.plotRight + 1, main.h);
+    ctx.clip();
+    ctx.font = FONT;
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+
+    for (const b of bands) {
+      const x1 = api.timeToX(b.start);
+      const x2 = api.timeToX(b.end);
+      if (!isNum(x1) || !isNum(x2)) continue;
+      const ax = Math.round(x1);
+      const bx = Math.round(x2);
+      if (bx <= ax) continue;
+      const color = this._colorOf(b.def, pal, tint);
+      ctx.globalAlpha = b.def.alpha != null ? b.def.alpha : this._alpha;
+      ctx.fillStyle = color;
+      ctx.fillRect(ax, main.y0, bx - ax, main.h);
+      if (this._labels && b.def.name && bx - ax >= LABEL_MIN) this._label(ctx, b.def.name, ax, main.y0, bx - ax, color, pal.bg);
+    }
+    ctx.restore();
+    ctx.globalAlpha = 1;
+  }
+
+  _colorOf(def, pal, tint) {
+    if (def.color === 'up' || def.color === 'down' || def.color === 'accent') return pal[def.color];
+    if (def.color) return def.color;
+    return tint.get(def) || DEFAULT_COLORS[0];
+  }
+
+  _label(ctx, name, ax, y, w, color, bg) {
+    const fit = (s) => (ctx.measureText(s).width <= w - 10 ? s : null);
+    let text = fit(name);
+    if (!text) {
+      // binary-search the longest prefix that fits (names are ≤ 24 chars)
+      let lo = 0;
+      let hi = name.length;
+      while (lo < hi) {
+        const mid = (lo + hi + 1) >> 1;
+        if (fit(name.slice(0, mid) + '…')) lo = mid;
+        else hi = mid - 1;
+      }
+      text = lo > 0 ? name.slice(0, lo) + '…' : null;
+    }
+    if (!text) return;
+    ctx.globalAlpha = 1;
+    ctx.strokeStyle = bg;
+    ctx.lineWidth = 3;
+    ctx.strokeText(text, ax + 5, y + 4);
+    ctx.fillStyle = color;
+    ctx.fillText(text, ax + 5, y + 4);
+  }
+}