From e48dca5da11aa417b01ced2d99e636563f0a5cfc Mon Sep 17 00:00:00 2001
From: Ray <sympatheticfire@gmail.com>
Date: Wed, 18 Oct 2023 14:44:49 +0100
Subject: [PATCH] WIP: Added multi-layers

---
 bbtimeline-background-canvas.js | 175 ++++++++++
 bbtimeline-canvas.js            |  95 +++++
 bbtimeline-foreground-canvas.js | 125 +++++++
 bbtimeline.js                   | 596 +++++++++++++++++---------------
 bbtimeline.min.js               |   2 +-
 demo-test.html                  |  29 +-
 6 files changed, 733 insertions(+), 289 deletions(-)
 create mode 100644 bbtimeline-background-canvas.js
 create mode 100644 bbtimeline-canvas.js
 create mode 100644 bbtimeline-foreground-canvas.js

diff --git a/bbtimeline-background-canvas.js b/bbtimeline-background-canvas.js
new file mode 100644
index 0000000..a678a0a
--- /dev/null
+++ b/bbtimeline-background-canvas.js
@@ -0,0 +1,175 @@
+class BBTimelineBackgroundCanvas extends BBTimelineCanvas {
+  constructor(parentEl, el) {
+    super(parentEl, el);
+
+    const a = this;
+
+    a.GraphRectangle = { X: 0, Y: 0, W: 0, H: 0 };
+    a.Margin = 0;
+    a.StepHeight = 0;
+    a.NoStep = 0;
+
+    a.initialiseComponents();
+  }
+
+  initialiseComponents() {
+    super.initialiseComponents();
+
+    const a = this;
+
+    a.ClientRectangle = {
+      X: a.Parent.Padding.Left,
+      Y: a.Parent.Padding.Top,
+      W: (a.Parent.Size.W - (a.Parent.Padding.Left + a.Parent.Padding.Right)),
+      H: (a.Parent.Size.H - (a.Parent.Padding.Top + a.Parent.Padding.Bottom))
+    };
+
+    a.GraphRectangle = {
+      X: a.ClientRectangle.X,
+      Y: a.ClientRectangle.Y,
+      W: a.ClientRectangle.W,
+      H: (a.ClientRectangle.H - a.calcXAxisHeight())
+    };
+
+    a.Margin = (a.Parent.Marker.BorderWidth * 2);
+    a.StepHeight = a.Parent.Marker.Width + a.Margin;
+    a.NoStep = Math.floor(a.GraphRectangle.H / a.StepHeight);
+
+    a.Invalidate();
+  }
+
+  Invalidate() {
+    const a = this;
+
+    a.Clear();
+
+    a.drawAxis();
+    a.drawXAxisTicks();
+    a.drawXAxisLabels();
+
+    if (a.Parent.Debug) a.drawRectangle(a.ClientRectangle, "red");
+    if (a.Parent.Debug) a.drawRectangle(a.GraphRectangle, "red");
+  }
+
+
+  drawAxis() {
+    const a = this;
+
+    a.CTX.beginPath();
+    a.CTX.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
+    a.CTX.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
+    a.CTX.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
+    a.CTX.lineWidth = a.Parent.Axis.LineWidth;
+    a.CTX.strokeStyle = a.Parent.Axis.LineColour1;
+    a.CTX.stroke();
+  }
+
+  drawXAxisTicks() {
+    const a = this;
+
+    let startPosX = a.GraphRectangle.X;
+    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
+    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
+
+    let i = 0;
+
+    while (true) {
+      if (startPosX >= endPosX) {
+        break;
+      }
+
+      a.CTX.beginPath();
+      a.CTX.moveTo(startPosX, posY);
+
+      if ((i % a.Parent.Axis.X.NoPartPerDay) == 0) {
+        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.DayLineHeight));
+        a.CTX.strokeStyle = a.Parent.Axis.X.DayLineColour;
+      } else {
+        a.CTX.lineTo(startPosX, (posY + a.Parent.Axis.X.HourLineHeight));
+        a.CTX.strokeStyle = a.Parent.Axis.X.HourLineColour;
+      }
+
+      a.CTX.lineWidth = a.Parent.Axis.LineWidth;
+      a.CTX.stroke();
+
+      startPosX += a.Parent.Axis.X.HourLineSpace;
+
+      i++;
+    }
+  }
+
+  drawXAxisLabels() {
+    const a = this;
+
+    const result = a.calcXAxisPositions();
+    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Parent.Axis.LineWidth;
+
+    result.forEach(function(e, i) {
+      const date = a.Parent.ConvertToDate(e.Date);
+
+      let writeLabel = false;
+      if ((i == 0)) {
+        // Don't label first entry if too close to the next month
+        if (date.getDate() < 25) {
+          writeLabel = true;
+        }
+      } else if (date.getDate() == 1) {
+        writeLabel = true;
+      }
+
+      // if (i == 0) {
+      //   return;
+      // }
+
+      const labelSize = a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight), a.Parent.DateToString(date, "dd"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "center");
+
+      // Write month on first of the month
+      if (writeLabel) {
+        a.drawText(e.X, (posY + a.Parent.Axis.X.DayLineHeight + labelSize.Height + a.Parent.Axis.LabelSpacing), a.Parent.DateToString(date, "MMMM yyyy"), a.Parent.Axis.Font, a.Parent.Axis.LabelColour, "left");
+      }
+    });
+  }
+
+  calcXAxisPositions() {
+    const a = this;
+    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
+
+    let result = [];
+    let x = a.GraphRectangle.X;
+    let date = a.Parent.ConvertToDate(a.Parent.ShowDate);
+
+    // Rollback one day
+    date.setDate(date.getDate() - 1);
+
+    while (true) {
+      if (x >= endPosX) {
+        break;
+      }
+
+      result.push({
+        Date: a.Parent.DateToString(date, a.Parent.DateParsePattern),
+        X: x
+      });
+
+      x += (a.Parent.Axis.X.HourLineSpace * a.Parent.Axis.X.NoPartPerDay);
+      date.setDate(date.getDate() + 1);
+    }
+
+    return result;
+  }
+
+  calcXAxisHeight() {
+    const a  = this;
+    const labelSize = a.measureText(a.Parent.Axis.Font, "0");
+
+    return labelSize.Height + a.Parent.Axis.LabelSpacing + (a.Parent.Axis.X.DayLineHeight * 2);
+  }
+
+  // OnMouseDown(sender, e, event) {
+  // }
+
+  // OnClick(sender, e, event) {
+  // }
+
+
+}
\ No newline at end of file
diff --git a/bbtimeline-canvas.js b/bbtimeline-canvas.js
new file mode 100644
index 0000000..97f49a0
--- /dev/null
+++ b/bbtimeline-canvas.js
@@ -0,0 +1,95 @@
+class BBTimelineCanvas {
+  constructor(parentEl, el) {
+    const a = this;
+
+    a.Parent = parentEl;
+    a.Container = el;
+    a.CTX = a.Container.getContext("2d");
+
+    a.ClientRectangle = { X: 0, Y: 0, W: 0, H: 0 };
+
+    a.initialiseComponents();
+  }
+
+  Clear() {
+    const a = this;
+
+    a.CTX.clearRect(0, 0, a.CTX.canvas.width, a.CTX.canvas.height);
+  }
+
+  Invalidate() {
+    // placeholder
+  }
+
+  initialiseComponents() {
+    const a = this;
+
+    a.Container.style.width = a.Parent.Size.W + "px";
+    a.Container.style.height = a.Parent.Size.H + "px";
+    a.Container.style.position = 'absolute';
+    a.Container.style.border = 'none';
+
+    a.CTX.canvas.width = a.Parent.Size.W;
+    a.CTX.canvas.height = a.Parent.Size.H;
+
+    a.Clear();
+  }
+
+
+  drawText(x, y, label, font, foreColour, align) {
+    const a = this;
+
+    a.CTX.font = font;
+    a.CTX.fillStyle = foreColour;
+
+    const size = a.measureText(font, label);
+
+    switch (align) {
+      case "center":
+        x = (x - size.OffsetLeft);
+        break;
+      case "right":
+        x = (x - size.Width);
+        break;
+      case "left":
+      default:
+        // do nothing
+        break;
+    }
+
+    a.CTX.fillText(label, x, (y + size.Height));
+
+    return size;
+  }
+
+  drawRectangle(rectangle, colour) {
+    const a = this;
+
+    a.CTX.beginPath();
+    a.CTX.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
+    //a.ctx.fillStyle = 'yellow';
+    //a.ctx.fill();
+    a.CTX.lineWidth = 1;
+    a.CTX.strokeStyle = colour;
+    a.CTX.stroke();
+  }
+
+  half(value) {
+    return (value / 2);
+  }
+
+  measureText(font, value) {
+    const a = this;
+
+    a.CTX.font = font;
+    const size = a.CTX.measureText(value);
+
+    return {
+      Width: size.width,
+      Height: size.fontBoundingBoxAscent,
+      OffsetLeft: a.half(size.width),
+      OffsetTop: a.half(size.fontBoundingBoxAscent)
+    };
+  }
+
+}
\ No newline at end of file
diff --git a/bbtimeline-foreground-canvas.js b/bbtimeline-foreground-canvas.js
new file mode 100644
index 0000000..0e4af99
--- /dev/null
+++ b/bbtimeline-foreground-canvas.js
@@ -0,0 +1,125 @@
+class BBTimelineForegroundCanvas extends BBTimelineCanvas {
+  constructor(parentEl, el) {
+    super(parentEl, el);
+
+    const a = this;
+
+    a.initialiseComponents();
+  }
+
+  initialiseComponents() {
+    super.initialiseComponents();
+
+    const a = this;
+
+    a.Invalidate();
+  }
+
+  Invalidate() {
+    const a = this;
+    const rect = a.Parent.Layer.Background.GraphRectangle;
+    const margin = a.Parent.Layer.Background.Margin;
+
+    a.Clear();
+
+    const startPosY = (rect.Y + a.Parent.Marker.Width);
+
+    const visibleEvents = a.Parent.FindVisibleEvents();
+    visibleEvents.forEach(function (e, i) {
+      // Calculate Y position
+      let posY = a.calcMarkerPosition(e.Position.X, startPosY);
+
+      a.drawVerticalLine(e.Position.X, posY);
+
+      const markerRectangle = a.drawMarker(e.Position.X, posY, e.BorderColour, e.BackColour);
+      const labelSize = a.drawText((markerRectangle.X + markerRectangle.W + margin), markerRectangle.Y, e.Label, a.Parent.Marker.Font, a.Parent.Marker.ForeColour, "left");
+
+      e.Position = { X: e.Position.X, Y: posY };
+
+      e.HitBox = {
+        X: markerRectangle.X,
+        Y: markerRectangle.Y,
+        W: (markerRectangle.W + margin + labelSize.Width + a.Parent.Marker.CollisionMargin),
+        H: markerRectangle.H
+      };
+
+      if (a.Parent.Debug) a.drawRectangle(e.HitBox, "red");
+      if (a.Parent.Debug) console.log(e);
+    });
+  }
+
+
+  calcMarkerPosition(x, y) {
+    const a = this;
+    const rect = a.Parent.Layer.Background.GraphRectangle;
+
+    // Calculate Y position
+    let hasMoved = false;
+    let posY = y;
+    for (let i=0; i<a.Parent.Layer.Background.NoStep; i++)
+    {
+      posY = y + (a.Parent.Layer.Background.StepHeight * i);
+
+      var clippedEvent = a.Parent.FindEventsByCoords(x, posY);
+      if (clippedEvent == null) {
+        hasMoved = true;
+        break;
+      }
+    }
+
+    if (!hasMoved) {
+      posY = y;
+    }
+
+    return posY;
+  }
+
+  drawMarker(x, y, borderColour, backColour) {
+    const a = this;
+    const width = a.Parent.Marker.Width - (a.Parent.Marker.BorderWidth * 2);
+
+    a.CTX.beginPath();
+    a.CTX.arc(x, y, width, 0, 2 * Math.PI, false);
+    a.CTX.fillStyle = backColour;
+    a.CTX.fill();
+    a.CTX.lineWidth = a.Parent.Marker.BorderWidth;
+    a.CTX.strokeStyle = borderColour;
+    a.CTX.stroke();
+
+    return a.measureMarker(x, y);
+  }
+
+  drawVerticalLine(x, y) {
+    const a = this;
+    const rect = a.Parent.Layer.Background.GraphRectangle;
+    const highlightLine = a.Parent.HighlightLine;
+    const linePosY = (rect.Y + rect.H);
+
+    if (y <= 0) {
+      y = (rect.Y + highlightLine.Width);
+    }
+
+    a.CTX.beginPath();
+    a.CTX.moveTo(x, y);
+    a.CTX.lineTo(x, (linePosY - highlightLine.Width));
+    a.CTX.lineWidth = highlightLine.Width;
+    a.CTX.strokeStyle = highlightLine.Colour;
+    a.CTX.stroke();
+  }
+
+  measureMarker(x, y) {
+    const a = this;
+    const offset = a.half(a.Parent.Marker.Width);
+
+    const result = {
+      X: x - (offset + a.Parent.Marker.BorderWidth),
+      Y: y - (offset + a.Parent.Marker.BorderWidth),
+      W: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2)),
+      H: (a.Parent.Marker.Width + (a.Parent.Marker.BorderWidth * 2))
+    };
+
+    return result;
+  }
+
+
+}
\ No newline at end of file
diff --git a/bbtimeline.js b/bbtimeline.js
index d9e0ea8..51088b6 100644
--- a/bbtimeline.js
+++ b/bbtimeline.js
@@ -1,14 +1,12 @@
 /**
  * BBTimeline
- * @version v0.1.0.089 beta (2023/10/14 1658)
+ * @version v0.1.1.121 beta (2023/10/18 2058)
  */
 class BBTimeline {
   constructor(el) {
     const a = this;
 
     a.Container = document.getElementById(el);
-    a.DateParsePattern = "yyyy-MM-dd";
-    a.Debug = false;
     a.Padding = {
       Left: 20,
       Top: 20,
@@ -19,10 +17,13 @@ class BBTimeline {
       W: a.Container.innerWidth || a.Container.clientWidth,
       H: a.Container.innerHeight || a.Container.clientHeight
     };
+    a.Layer = {
+      Background: null,
+      Flourish: null,
+      Markers: null
+    };
 
-    a.ctx = a.Container.getContext("2d");
-    a.ctx.canvas.width = a.Size.W;
-    a.ctx.canvas.height = a.Size.H;
+    a.DateParsePattern = "yyyy-MM-dd";
 
     a.Axis = {
       LineColour1: "#CFCFCF",
@@ -39,6 +40,7 @@ class BBTimeline {
         DayLineColour: "#282828"
       }
     };
+
     a.Marker = {
       BorderColour: "#3A5D9C",
       BorderWidth: 2,
@@ -48,15 +50,19 @@ class BBTimeline {
       Font: "9pt Arial",
       CollisionMargin: 8
     };
+
     a.HighlightLine = {
       Colour: "#A6A6A6",
       Width: 1,
     };
+
     a.Events = [];
     a.StartDate = a.DateToString(new Date(), a.DateParsePattern);
     a.ShowDate = a.StartDate;
-    a.GraphRectangle = a.calcGraphRectangle();
+    // a.GraphRectangle = a.calcGraphRectangle();
+
     a.Enabled = false;
+    a.Debug = false;
 
     a.initialiseComponents();
   }
@@ -82,8 +88,8 @@ class BBTimeline {
 
   CalcEndDate() {
     const a = this;
-
-    const calcdays = Math.floor(a.GraphRectangle.W / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
+    const clientWidth = (a.Size.W - (a.Padding.Left + a.Padding.Right));
+    const calcdays = Math.floor(clientWidth / (a.Axis.X.NoPartPerDay * a.Axis.X.HourLineSpace));
 
     let date = a.ConvertToDate(a.ShowDate);
     date.setDate(date.getDate() + calcdays);
@@ -97,7 +103,9 @@ class BBTimeline {
   Clear() {
     const a = this;
 
-    a.ctx.clearRect(0, 0, a.ctx.canvas.width, a.ctx.canvas.height);
+    a.Layer.Background.Clear();
+    a.Layer.Flourish.Clear();
+    a.Layer.Markers.Clear();
 
     a.StartDate = a.DateToString(new Date(), a.DateParsePattern);
     a.ShowDate = a.StartDate;
@@ -121,7 +129,7 @@ class BBTimeline {
   FindDatePosition(date) {
     const a = this;
 
-    const points = a.getXAxis();
+    const points = a.Layer.Background.calcXAxisPositions();
     for (let i=0; i<points.length; i++) {
       if (points[i].Date == date){
         return points[i];
@@ -135,7 +143,8 @@ class BBTimeline {
     const a = this;
     let result = [];
 
-    const availableX = a.getXAxis();
+    const availableX = a.Layer.Background.calcXAxisPositions();
+
     availableX.forEach(function (e) {
       const event = a.FindEvent(e.Date);
       if (event == null) {
@@ -204,23 +213,23 @@ class BBTimeline {
     a.Invalidate(true, true);
   }
 
-  ShowNext() {
-    const a = this;
+  // ShowNext() {
+  //   const a = this;
 
-    let date = a.ConvertToDate(a.ShowDate);
-    date.setMonth(date.getMonth() + 1);
+  //   let date = a.ConvertToDate(a.ShowDate);
+  //   date.setMonth(date.getMonth() + 1);
 
-    a.Show(a.DateToString(date, a.DateParsePattern));
-  }
+  //   a.Show(a.DateToString(date, a.DateParsePattern));
+  // }
 
-  ShowPrevious() {
-    const a = this;
+  // ShowPrevious() {
+  //   const a = this;
 
-    let date = a.ConvertToDate(a.ShowDate);
-    date.setMonth(date.getMonth() - 1);
+  //   let date = a.ConvertToDate(a.ShowDate);
+  //   date.setMonth(date.getMonth() - 1);
 
-    a.Show(a.DateToString(date, a.DateParsePattern));
-  }
+  //   a.Show(a.DateToString(date, a.DateParsePattern));
+  // }
 
   UpdateLabel(date, label) {
     const a = this;
@@ -249,43 +258,54 @@ class BBTimeline {
     a.Invalidate(false, true);
   }
 
-  initialiseComponents() {
-    const a = this;
+//   initialiseComponents2() {
+//     const a = this;
 
-    a.ctx.canvas.addEventListener('mousedown', function (e) {
-      if (!a.Enabled) {
-        return;
-      }
+//     a.ctx.canvas.addEventListener('mousedown', function (e) {
+//       if (!a.Enabled) {
+//         return;
+//       }
 
-      var event = a.FindEventsByCoords(e.offsetX, e.offsetY);
-      if (event == null) {
-        return;
-      }
+//       var event = a.FindEventsByCoords(e.offsetX, e.offsetY);
+//       if (event == null) {
+//         return;
+//       }
 
-      if (a.Debug) console.log(event);
+//       if (a.Debug) console.log(event);
 
-      a.OnMouseDown(this, e, event);
-   });
+//       a.OnMouseDown(this, e, event);
+//    });
 
-   a.ctx.canvas.addEventListener('click', function (e) {
-    if (!a.Enabled) {
-      return;
-    }
+//    a.ctx.canvas.addEventListener('click', function (e) {
+//     if (!a.Enabled) {
+//       return;
+//     }
 
-    var event = a.FindEventsByCoords(e.offsetX, e.offsetY);
-    if (event == null) {
-      return;
-    }
+//     var event = a.FindEventsByCoords(e.offsetX, e.offsetY);
+//     if (event == null) {
+//       return;
+//     }
 
-    if (a.Debug) console.log(event);
+//     if (a.Debug) console.log(event);
 
-    a.OnClick(this, e, event);
- });
-  }
+//     a.OnClick(this, e, event);
+//  });
+//   }
 
   Invalidate(redrawAxis, redrawMarkers) {
     const a = this;
 
+    if (redrawAxis) {
+      a.Layer.Background.Invalidate();
+    }
+
+    if (redrawMarkers) {
+      a.Layer.Markers.Invalidate();
+    }
+
+
+    return;
+
     if (redrawAxis) {
       a.ctx.clearRect(0, 0, a.ctx.canvas.width, a.ctx.canvas.height);
 
@@ -295,12 +315,12 @@ class BBTimeline {
     }
 
     if (redrawMarkers) {
-      a.clearChart();
+      // a.clearChart();
 
-      const startPosY = (a.GraphRectangle.Y + a.Marker.Width);
-      const visibleEvents = a.FindVisibleEvents();
+      // const startPosY = (a.GraphRectangle.Y + a.Marker.Width);
+      // const visibleEvents = a.FindVisibleEvents();
 
-      if (a.Debug) console.log(visibleEvents);
+      // if (a.Debug) console.log(visibleEvents);
 
       visibleEvents.forEach(function (e, i) {
         // Calculate Y position
@@ -405,295 +425,319 @@ class BBTimeline {
   }
 
 
-  calcGraphRectangle() {
-    const a = this;
+  // calcGraphRectangle() {
+  //   const a = this;
 
-    const xAxisHeight = a.calcXAxisHeight();
+  //   // const xAxisHeight = a.calcXAxisHeight();
 
-    let result = {
-      X: a.Padding.Left,
-      Y: a.Padding.Top,
-      W: (a.Size.W - (a.Padding.Left + a.Padding.Right)),
-      H: (a.Size.H - (a.Padding.Top + a.Padding.Bottom) - xAxisHeight),
-      Margin: (a.Marker.BorderWidth * 2)
-    };
+  //   // let result = {
+  //   //   X: a.Padding.Left,
+  //   //   Y: a.Padding.Top,
+  //   //   W: (a.Size.W - (a.Padding.Left + a.Padding.Right)),
+  //   //   H: (a.Size.H - (a.Padding.Top + a.Padding.Bottom) - xAxisHeight),
+  //   //   Margin: (a.Marker.BorderWidth * 2)
+  //   // };
 
-    result.StepHeight = a.Marker.Width + result.Margin;
-    result.NoStep = Math.floor(result.H / result.StepHeight);
+  //   let result = {
+  //     X: a.Padding.Left,
+  //     Y: a.Padding.Top,
+  //     W: (a.Size.W - (a.Padding.Left + a.Padding.Right)),
+  //     H: (a.Size.H - (a.Padding.Top + a.Padding.Bottom)),
+  //     Margin: (a.Marker.BorderWidth * 2)
+  //   };
 
-    return result;
-  }
+  //   result.StepHeight = a.Marker.Width + result.Margin;
+  //   result.NoStep = Math.floor(result.H / result.StepHeight);
 
-  calcXAxisHeight() {
-    const a  = this;
-    const labelSize = a.measureText(a.Axis.Font, "0");
-    const result = labelSize.Height + a.Axis.LabelSpacing + (a.Axis.X.DayLineHeight * 2);
+  //   return result;
+  // }
 
-    return result;
-  }
+  // calcXAxisHeight() {
+  //   const a  = this;
+  //   const labelSize = a.measureText(a.Axis.Font, "0");
+  //   const result = labelSize.Height + a.Axis.LabelSpacing + (a.Axis.X.DayLineHeight * 2);
+
+  //   return result;
+  // }
 
 
-  calcMarkerPosition(x, y) {
-    const a = this;
+  // calcMarkerPosition(x, y) {
+  //   const a = this;
 
-    // Calculate Y position
-    let hasMoved = false;
-    let posY = y;
-    for (let i=0; i<a.GraphRectangle.NoStep; i++)
-    {
-      posY = y + (a.GraphRectangle.StepHeight * i);
+  //   // Calculate Y position
+  //   let hasMoved = false;
+  //   let posY = y;
+  //   for (let i=0; i<a.GraphRectangle.NoStep; i++)
+  //   {
+  //     posY = y + (a.GraphRectangle.StepHeight * i);
 
-      var clippedEvent = a.FindEventsByCoords(x, posY);
-      if (clippedEvent == null) {
-        hasMoved = true;
-        break;
-      }
-    }
+  //     var clippedEvent = a.FindEventsByCoords(x, posY);
+  //     if (clippedEvent == null) {
+  //       hasMoved = true;
+  //       break;
+  //     }
+  //   }
 
-    if (!hasMoved) {
-      posY = y;
-    }
+  //   if (!hasMoved) {
+  //     posY = y;
+  //   }
 
-    return posY;
-  }
+  //   return posY;
+  // }
 
-  clearChart() {
-    const a = this;
-    const rect = {
-      X: a.GraphRectangle.X,
-      Y: a.GraphRectangle.Y,
-      W: a.GraphRectangle.W,
-      H: a.GraphRectangle.H
-    };
+  // clearChart() {
+  //   const a = this;
+  //   const rect = {
+  //     X: a.GraphRectangle.X,
+  //     Y: a.GraphRectangle.Y,
+  //     W: a.GraphRectangle.W,
+  //     H: a.GraphRectangle.H
+  //   };
 
-    rect.X += a.Axis.LineWidth;
-    rect.Y -= a.Padding.Top;
-    rect.W -= a.Axis.LineWidth;
-    rect.W += a.Padding.Right;
-    rect.H -= a.Axis.LineWidth;
-    rect.H += a.Padding.Top;
+  //   rect.X += a.Axis.LineWidth;
+  //   rect.Y -= a.Padding.Top;
+  //   rect.W -= a.Axis.LineWidth;
+  //   rect.W += a.Padding.Right;
+  //   rect.H -= a.Axis.LineWidth;
+  //   rect.H += a.Padding.Top;
 
-    a.ctx.clearRect(rect.X, rect.Y, rect.W, rect.H);
+  //   a.ctx.clearRect(rect.X, rect.Y, rect.W, rect.H);
 
-    if (a.Debug) a.drawRectangle(rect);
+  //   if (a.Debug) a.drawRectangle(rect);
 
-    // Clear marker positions
-    const visibleEvents = a.FindVisibleEvents();
-    visibleEvents.forEach(function (e, i) {
-      e.Position = { X: 0, Y: 0 };
-      e.HitBox = null;
-    });
-  }
+  //   // Clear marker positions
+  //   const visibleEvents = a.FindVisibleEvents();
+  //   visibleEvents.forEach(function (e, i) {
+  //     e.Position = { X: 0, Y: 0 };
+  //     e.HitBox = null;
+  //   });
+  // }
 
-  drawAxis() {
-    const a = this;
+  // drawAxis() {
+  //   const a = this;
 
-    a.ctx.beginPath();
-    a.ctx.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
-    a.ctx.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
-    a.ctx.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
-    a.ctx.lineWidth = a.Axis.LineWidth;
-    a.ctx.strokeStyle = a.Axis.LineColour1;
-    a.ctx.stroke();
-  }
+  //   a.ctx.beginPath();
+  //   a.ctx.moveTo(a.GraphRectangle.X, a.GraphRectangle.Y);
+  //   a.ctx.lineTo(a.GraphRectangle.X, (a.GraphRectangle.H + a.GraphRectangle.Y));
+  //   a.ctx.lineTo((a.GraphRectangle.W + a.GraphRectangle.X), (a.GraphRectangle.H + a.GraphRectangle.Y));
+  //   a.ctx.lineWidth = a.Axis.LineWidth;
+  //   a.ctx.strokeStyle = a.Axis.LineColour1;
+  //   a.ctx.stroke();
+  // }
 
-  drawXAxis() {
-    const a = this;
+  // drawXAxis() {
+  //   const a = this;
 
-    let startPosX = a.GraphRectangle.X;
-    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
-    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
+  //   let startPosX = a.GraphRectangle.X;
+  //   const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
+  //   const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
 
-    let i = 0;
+  //   let i = 0;
 
-    while (true) {
-      if (startPosX >= endPosX) {
-        break;
-      }
+  //   while (true) {
+  //     if (startPosX >= endPosX) {
+  //       break;
+  //     }
 
-      a.ctx.beginPath();
-      a.ctx.moveTo(startPosX, posY);
+  //     a.ctx.beginPath();
+  //     a.ctx.moveTo(startPosX, posY);
 
-      if ((i % a.Axis.X.NoPartPerDay) == 0) {
-        a.ctx.lineTo(startPosX, (posY + a.Axis.X.DayLineHeight));
-        a.ctx.strokeStyle = a.Axis.X.DayLineColour;
-      } else {
-        a.ctx.lineTo(startPosX, (posY + a.Axis.X.HourLineHeight));
-        a.ctx.strokeStyle = a.Axis.X.HourLineColour;
-      }
+  //     if ((i % a.Axis.X.NoPartPerDay) == 0) {
+  //       a.ctx.lineTo(startPosX, (posY + a.Axis.X.DayLineHeight));
+  //       a.ctx.strokeStyle = a.Axis.X.DayLineColour;
+  //     } else {
+  //       a.ctx.lineTo(startPosX, (posY + a.Axis.X.HourLineHeight));
+  //       a.ctx.strokeStyle = a.Axis.X.HourLineColour;
+  //     }
 
-      a.ctx.lineWidth = a.Axis.LineWidth;
-      a.ctx.stroke();
+  //     a.ctx.lineWidth = a.Axis.LineWidth;
+  //     a.ctx.stroke();
 
-      startPosX += a.Axis.X.HourLineSpace;
+  //     startPosX += a.Axis.X.HourLineSpace;
 
-      i++;
-    }
-  }
+  //     i++;
+  //   }
+  // }
 
-  drawXAxisLabels() {
-    const a = this;
+  // drawXAxisLabels() {
+  //   const a = this;
 
-    const result = a.getXAxis();
-    const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
+  //   const result = a.getXAxis();
+  //   const posY = (a.GraphRectangle.Y + a.GraphRectangle.H) + a.Axis.LineWidth;
 
-    result.forEach(function(e, i) {
-      const date = a.ConvertToDate(e.Date);
+  //   result.forEach(function(e, i) {
+  //     const date = a.ConvertToDate(e.Date);
 
-      let writeLabel = false;
-      if ((i == 0)) {
-        // Don't label first entry if too close to the next month
-        if (date.getDate() < 25) {
-          writeLabel = true;
-        }
-      } else if (date.getDate() == 1) {
-        writeLabel = true;
-      }
+  //     let writeLabel = false;
+  //     if ((i == 0)) {
+  //       // Don't label first entry if too close to the next month
+  //       if (date.getDate() < 25) {
+  //         writeLabel = true;
+  //       }
+  //     } else if (date.getDate() == 1) {
+  //       writeLabel = true;
+  //     }
 
-      // if (i == 0) {
-      //   return;
-      // }
+  //     // if (i == 0) {
+  //     //   return;
+  //     // }
 
-      const labelSize = a.drawText(e.X, (posY + a.Axis.X.DayLineHeight), a.DateToString(date, "dd"), a.Axis.Font, a.Axis.LabelColour, "center");
+  //     const labelSize = a.drawText(e.X, (posY + a.Axis.X.DayLineHeight), a.DateToString(date, "dd"), a.Axis.Font, a.Axis.LabelColour, "center");
 
-      // Write month on first of the month
-      if (writeLabel) {
-        a.drawText(e.X, (posY + a.Axis.X.DayLineHeight + labelSize.Height + a.Axis.LabelSpacing), a.DateToString(date, "MMMM yyyy"), a.Axis.Font, a.Axis.LabelColour, "left");
-      }
-    });
-  }
+  //     // Write month on first of the month
+  //     if (writeLabel) {
+  //       a.drawText(e.X, (posY + a.Axis.X.DayLineHeight + labelSize.Height + a.Axis.LabelSpacing), a.DateToString(date, "MMMM yyyy"), a.Axis.Font, a.Axis.LabelColour, "left");
+  //     }
+  //   });
+  // }
 
-  drawMarker(x, y, borderColour, backColour) {
-    const a = this;
-    const width = a.Marker.Width - (a.Marker.BorderWidth * 2);
+  // drawMarker(x, y, borderColour, backColour) {
+  //   const a = this;
+  //   const width = a.Marker.Width - (a.Marker.BorderWidth * 2);
 
-    a.ctx.beginPath();
-    a.ctx.arc(x, y, width, 0, 2 * Math.PI, false);
-    a.ctx.fillStyle = backColour;
-    a.ctx.fill();
-    a.ctx.lineWidth = a.Marker.BorderWidth;
-    a.ctx.strokeStyle = borderColour;
-    a.ctx.stroke();
+  //   a.ctx.beginPath();
+  //   a.ctx.arc(x, y, width, 0, 2 * Math.PI, false);
+  //   a.ctx.fillStyle = backColour;
+  //   a.ctx.fill();
+  //   a.ctx.lineWidth = a.Marker.BorderWidth;
+  //   a.ctx.strokeStyle = borderColour;
+  //   a.ctx.stroke();
 
-    return a.measureMarker(x, y);
-  }
+  //   return a.measureMarker(x, y);
+  // }
 
-  drawText(x, y, label, font, foreColour, align) {
-    const a = this;
+  // drawText(x, y, label, font, foreColour, align) {
+  //   const a = this;
 
-    a.ctx.font = font;
-    a.ctx.fillStyle = foreColour;
+  //   a.ctx.font = font;
+  //   a.ctx.fillStyle = foreColour;
 
-    const size = a.measureText(font, label);
+  //   const size = a.measureText(font, label);
 
-    switch (align) {
-      case "center":
-        x = (x - size.OffsetLeft);
-        break;
-      case "right":
-        x = (x - size.Width);
-        break;
-      case "left":
-      default:
-        // do nothing
-        break;
-    }
+  //   switch (align) {
+  //     case "center":
+  //       x = (x - size.OffsetLeft);
+  //       break;
+  //     case "right":
+  //       x = (x - size.Width);
+  //       break;
+  //     case "left":
+  //     default:
+  //       // do nothing
+  //       break;
+  //   }
 
-    a.ctx.fillText(label, x, (y + size.Height));
+  //   a.ctx.fillText(label, x, (y + size.Height));
 
-    return size;
-  }
+  //   return size;
+  // }
 
-  drawRectangle(rectangle) {
-    const a = this;
+  // drawRectangle(rectangle) {
+  //   const a = this;
 
-    a.ctx.beginPath();
-    a.ctx.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
-    //a.ctx.fillStyle = 'yellow';
-    //a.ctx.fill();
-    a.ctx.lineWidth = 1;
-    a.ctx.strokeStyle = 'red';
-    a.ctx.stroke();
-  }
+  //   a.ctx.beginPath();
+  //   a.ctx.rect(rectangle.X, rectangle.Y, rectangle.W, rectangle.H);
+  //   //a.ctx.fillStyle = 'yellow';
+  //   //a.ctx.fill();
+  //   a.ctx.lineWidth = 1;
+  //   a.ctx.strokeStyle = 'red';
+  //   a.ctx.stroke();
+  // }
 
-  drawVerticalLine(x, y) {
-    const a = this;
-    const linePosY = (a.GraphRectangle.Y + a.GraphRectangle.H);
+  // drawVerticalLine(x, y) {
+  //   const a = this;
+  //   const linePosY = (a.GraphRectangle.Y + a.GraphRectangle.H);
 
-    if (y <= 0) {
-      y = (a.GraphRectangle.Y + a.HighlightLine.Width);
-    }
+  //   if (y <= 0) {
+  //     y = (a.GraphRectangle.Y + a.HighlightLine.Width);
+  //   }
 
-    a.ctx.beginPath();
-    a.ctx.moveTo(x, y);
-    a.ctx.lineTo(x, (linePosY - a.HighlightLine.Width));
-    a.ctx.lineWidth = a.HighlightLine.Width;
-    a.ctx.strokeStyle = a.HighlightLine.Colour;
-    a.ctx.stroke();
-  }
+  //   a.ctx.beginPath();
+  //   a.ctx.moveTo(x, y);
+  //   a.ctx.lineTo(x, (linePosY - a.HighlightLine.Width));
+  //   a.ctx.lineWidth = a.HighlightLine.Width;
+  //   a.ctx.strokeStyle = a.HighlightLine.Colour;
+  //   a.ctx.stroke();
+  // }
 
-  getXAxis() {
-    const a = this;
-    const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
+  // getXAxis() {
+  //   const a = this;
+  //   const endPosX = (a.GraphRectangle.X + a.GraphRectangle.W);
 
-    let result = [];
-    let x = a.GraphRectangle.X;
-    let date = a.ConvertToDate(a.ShowDate);
+  //   let result = [];
+  //   let x = a.GraphRectangle.X;
+  //   let date = a.ConvertToDate(a.ShowDate);
 
-    // Rollback one day
-    date.setDate(date.getDate() - 1);
+  //   // Rollback one day
+  //   date.setDate(date.getDate() - 1);
 
-    while (true) {
-      if (x >= endPosX) {
-        break;
-      }
+  //   while (true) {
+  //     if (x >= endPosX) {
+  //       break;
+  //     }
 
-      result.push({
-        Date: a.DateToString(date, a.DateParsePattern),
-        X: x
-      });
+  //     result.push({
+  //       Date: a.DateToString(date, a.DateParsePattern),
+  //       X: x
+  //     });
 
-      x += (a.Axis.X.HourLineSpace * a.Axis.X.NoPartPerDay);
-      date.setDate(date.getDate() + 1);
-    }
+  //     x += (a.Axis.X.HourLineSpace * a.Axis.X.NoPartPerDay);
+  //     date.setDate(date.getDate() + 1);
+  //   }
 
-    return result;
-  }
+  //   return result;
+  // }
 
-  half(value) {
-    return (value / 2);
-  }
+  // half(value) {
+  //   return (value / 2);
+  // }
 
-  measureMarker(x, y) {
-    const a = this;
-    const offset = a.half(a.Marker.Width);
+  // measureMarker(x, y) {
+  //   const a = this;
+  //   const offset = a.half(a.Marker.Width);
 
-    const result = {
-      X: x - (offset + a.Marker.BorderWidth),
-      Y: y - (offset + a.Marker.BorderWidth),
-      W: (a.Marker.Width + (a.Marker.BorderWidth * 2)),
-      H: (a.Marker.Width + (a.Marker.BorderWidth * 2))
-    };
+  //   const result = {
+  //     X: x - (offset + a.Marker.BorderWidth),
+  //     Y: y - (offset + a.Marker.BorderWidth),
+  //     W: (a.Marker.Width + (a.Marker.BorderWidth * 2)),
+  //     H: (a.Marker.Width + (a.Marker.BorderWidth * 2))
+  //   };
 
-    return result;
-  }
+  //   return result;
+  // }
 
-  measureText(font, value) {
-    const a = this;
+  // measureText(font, value) {
+  //   const a = this;
 
-    a.ctx.font = font;
-    const size = a.ctx.measureText(value);
+  //   a.ctx.font = font;
+  //   const size = a.ctx.measureText(value);
 
-    return {
-      Width: size.width,
-      Height: size.fontBoundingBoxAscent,
-      OffsetLeft: a.half(size.width),
-      OffsetTop: a.half(size.fontBoundingBoxAscent)
-    };
-  }
+  //   return {
+  //     Width: size.width,
+  //     Height: size.fontBoundingBoxAscent,
+  //     OffsetLeft: a.half(size.width),
+  //     OffsetTop: a.half(size.fontBoundingBoxAscent)
+  //   };
+  // }
 
   ConvertToDate(value) {
     return new Date(Date.parse(value));
   }
 
+
+
+
+  initialiseComponents() {
+    const a = this;
+
+    a.Container.innerHTML = "<canvas></canvas><canvas></canvas><canvas></canvas>";
+
+    const canvasList = a.Container.getElementsByTagName("canvas");
+
+    a.Layer.Background = new BBTimelineBackgroundCanvas(a, canvasList[0]);
+    a.Layer.Flourish = new BBTimelineCanvas(a, canvasList[1]);
+    a.Layer.Markers = new BBTimelineForegroundCanvas(a, canvasList[2]);
+
+  }
+
 }
\ No newline at end of file
diff --git a/bbtimeline.min.js b/bbtimeline.min.js
index 0463649..14f7735 100644
--- a/bbtimeline.min.js
+++ b/bbtimeline.min.js
@@ -2,4 +2,4 @@
  * BBTimeline
  * @version v0.1.0.089 beta (2023/10/14 1658)
  */
-class BBTimeline{constructor(el){const a=this;a.Container=document.getElementById(el),a.DateParsePattern="yyyy-MM-dd",a.Debug=!1,a.Padding={Left:20,Top:20,Right:20,Bottom:0},a.Size={W:a.Container.innerWidth||a.Container.clientWidth,H:a.Container.innerHeight||a.Container.clientHeight},a.ctx=a.Container.getContext("2d"),a.ctx.canvas.width=a.Size.W,a.ctx.canvas.height=a.Size.H,a.Axis={LineColour1:"#CFCFCF",LineWidth:1,Font:"8pt Arial",LabelColour:"#000000",LabelSpacing:6,X:{NoPartPerDay:4,HourLineSpace:6,HourLineHeight:10,HourLineColour:"#A6A6A6",DayLineHeight:20,DayLineColour:"#282828"}},a.Marker={BorderColour:"#3A5D9C",BorderWidth:2,BackColour:"#D4DEEF",Width:10,ForeColour:"#3A5D9C",Font:"9pt Arial",CollisionMargin:8},a.HighlightLine={Colour:"#A6A6A6",Width:1},a.Events=[],a.StartDate=a.DateToString(new Date,a.DateParsePattern),a.ShowDate=a.StartDate,a.GraphRectangle=a.calcGraphRectangle(),a.Enabled=!1,a.initialiseComponents()}AddEvent(date,label,options){const a=this,_options=Object.assign(a.GenerateEventItem(),options);let event=a.FindEvent(date);null==event&&(a.Events.push(a.GenerateEvent(date)),event=a.FindEvent(date)),null!=label&&(event.Label=label),event.Events.push(_options)}CalcEndDate(){const a=this,calcdays=Math.floor(a.GraphRectangle.W/(a.Axis.X.NoPartPerDay*a.Axis.X.HourLineSpace));let date=a.ConvertToDate(a.ShowDate);return date.setDate(date.getDate()+calcdays),date.setDate(date.getDate()-1),a.DateToString(date,a.DateParsePattern)}Clear(){const a=this;a.ctx.clearRect(0,0,a.ctx.canvas.width,a.ctx.canvas.height),a.StartDate=a.DateToString(new Date,a.DateParsePattern),a.ShowDate=a.StartDate,a.Enabled=!1,a.Events=[]}DeleteMarker(date){const a=this;for(let i=0;i<a.Events.length;i++)a.Events[i].Date==date&&a.Events.splice(i,1)}FindDatePosition(date){const a=undefined,points=this.getXAxis();for(let i=0;i<points.length;i++)if(points[i].Date==date)return points[i];return null}FindVisibleEvents(){const a=this;let result=[];const availableX=undefined;return a.getXAxis().forEach((function(e){const event=a.FindEvent(e.Date);null!=event&&(event.Position.X=e.X,result.push(event))})),result}FindEvent(date){const a=this;for(let i=0;i<a.Events.length;i++)if(a.Events[i].Date==date)return a.Events[i];return null}FindEventsByCoords(x,y){const a=this;for(let i=0;i<a.Events.length;i++){const e=a.Events[i].HitBox;if(null==a.Events[i].HitBox)continue;const x2=e.X+e.W,y2=e.Y+e.H;if(x>=e.X&&x<=x2&&y>=e.Y&&y<=y2)return a.Events[i]}return null}Load(startDate){const a=this;a.StartDate=startDate,a.Show(startDate)}Show(date){const a=this;a.ConvertToDate(date)<a.ConvertToDate(a.StartDate)&&(date=a.StartDate),a.ShowDate=date,a.Enabled=!0,a.Invalidate(!0,!0)}ShowNext(){const a=this;let date=a.ConvertToDate(a.ShowDate);date.setMonth(date.getMonth()+1),a.Show(a.DateToString(date,a.DateParsePattern))}ShowPrevious(){const a=this;let date=a.ConvertToDate(a.ShowDate);date.setMonth(date.getMonth()-1),a.Show(a.DateToString(date,a.DateParsePattern))}UpdateLabel(date,label){const a=this;let event=a.FindEvent(date);null!=event&&(event.Label=label,a.Invalidate(!1,!0))}UpdateMarker(date,borderColour,backColour){const a=this;let event=a.FindEvent(date);null!=event&&(event.BorderColour=borderColour,event.BackColour=backColour,a.Invalidate(!1,!0))}initialiseComponents(){const a=this;a.ctx.canvas.addEventListener("mousedown",(function(e){if(a.Enabled){var event=a.FindEventsByCoords(e.offsetX,e.offsetY);null!=event&&(a.Debug&&console.log(event),a.OnMouseDown(this,e,event))}})),a.ctx.canvas.addEventListener("click",(function(e){if(a.Enabled){var event=a.FindEventsByCoords(e.offsetX,e.offsetY);null!=event&&(a.Debug&&console.log(event),a.OnClick(this,e,event))}}))}Invalidate(redrawAxis,redrawMarkers){const a=this;if(redrawAxis&&(a.ctx.clearRect(0,0,a.ctx.canvas.width,a.ctx.canvas.height),a.drawAxis(),a.drawXAxis(),a.drawXAxisLabels()),redrawMarkers){a.clearChart();const startPosY=a.GraphRectangle.Y+a.Marker.Width,visibleEvents=a.FindVisibleEvents();a.Debug&&console.log(visibleEvents),visibleEvents.forEach((function(e,i){let posY=a.calcMarkerPosition(e.Position.X,startPosY);a.drawVerticalLine(e.Position.X,posY);const markerRectangle=a.drawMarker(e.Position.X,posY,e.BorderColour,e.BackColour),labelSize=a.drawText(markerRectangle.X+markerRectangle.W+a.GraphRectangle.Margin,markerRectangle.Y,e.Label,a.Marker.Font,a.Marker.ForeColour,"left");e.Position={X:e.Position.X,Y:posY},e.HitBox={X:markerRectangle.X,Y:markerRectangle.Y,W:markerRectangle.W+a.GraphRectangle.Margin+labelSize.Width+a.Marker.CollisionMargin,H:markerRectangle.H},a.Debug&&a.drawRectangle(e.HitBox),a.Debug&&console.log(e.HitBox)}))}a.Debug&&a.drawRectangle(a.GraphRectangle)}GenerateEvent(date){const a=this;return{Date:date,Label:"",Position:{X:0,Y:0},Events:[],HitBox:null,BorderColour:a.Marker.BorderColour,BackColour:a.Marker.BackColour}}GenerateEventItem(){return{Title:"",Description:"",Link:"",Tag:null}}DateToString(date,pattern){let result=pattern;return result=result.replace("fffffff",date.getMilliseconds().toString().padStart(7,"0")),result=result.replace("ffffff",date.getMilliseconds().toString().padStart(6,"0")),result=result.replace("fffff",date.getMilliseconds().toString().padStart(5,"0")),result=result.replace("yyyy",date.getFullYear().toString().padStart(4,"0")),result=result.replace("MMMM","{1}"),result=result.replace("dddd","{2}"),result=result.replace("ffff",date.getMilliseconds().toString().padStart(4,"0")),result=result.replace("yyy",date.getFullYear().toString().padStart(3,"0")),result=result.replace("MMM","{3}"),result=result.replace("ddd","{4}"),result=result.replace("fff",date.getMilliseconds().toString().padStart(3,"0")),result=result.replace("zzz",""),result=result.replace("yy",date.getFullYear().toString().slice(-2)),result=result.replace("MM",(date.getMonth()+1).toString().padStart(2,"0")),result=result.replace("dd",date.getDate().toString().padStart(2,"0")),result=result.replace("HH",date.getHours().toString().padStart(2,"0")),result=result.replace("hh",(date.getHours()>12?date.getHours()-12:date.getHours()).toString().padStart(2,"0")),result=result.replace("mm",date.getMinutes().toString().padStart(2,"0")),result=result.replace("ss",date.getSeconds().toString().padStart(2,"0")),result=result.replace("ff",date.getMilliseconds().toString().padStart(2,"0")),result=result.replace("tt","{5}"),result=result.replace("zz",""),result=result.replace("y",date.getFullYear().toString()),result=result.replace("M",(date.getMonth()+1).toString()),result=result.replace("d",date.getDate().toString()),result=result.replace("H",date.getHours().toString()),result=result.replace("h",(date.getHours()>12?date.getHours()-12:date.getHours()).toString()),result=result.replace("m",date.getMinutes().toString()),result=result.replace("s",date.getSeconds().toString()),result=result.replace("z",""),result=result.replace("t","{6}"),result=result.replace("Z",""),result=result.replace("{1}",date.toLocaleString("default",{month:"long"})),result=result.replace("{2}",date.toLocaleString("default",{weekday:"long"})),result=result.replace("{3}",date.toLocaleString("default",{month:"short"})),result=result.replace("{4}",date.toLocaleString("default",{weekday:"short"})),result=result.replace("{5}",date.getHours()>=12?"PM":"AM"),result=result.replace("{6}",date.getHours()>=12?"P":"A"),result}OnMouseDown(sender,e,event){}OnClick(sender,e,event){}calcGraphRectangle(){const a=this,xAxisHeight=a.calcXAxisHeight();let result={X:a.Padding.Left,Y:a.Padding.Top,W:a.Size.W-(a.Padding.Left+a.Padding.Right),H:a.Size.H-(a.Padding.Top+a.Padding.Bottom)-xAxisHeight,Margin:2*a.Marker.BorderWidth};return result.StepHeight=a.Marker.Width+result.Margin,result.NoStep=Math.floor(result.H/result.StepHeight),result}calcXAxisHeight(){const a=this,labelSize=undefined,result=undefined;return a.measureText(a.Axis.Font,"0").Height+a.Axis.LabelSpacing+2*a.Axis.X.DayLineHeight}calcMarkerPosition(x,y){const a=this;let hasMoved=!1,posY=y;for(let i=0;i<a.GraphRectangle.NoStep;i++){var clippedEvent;if(posY=y+a.GraphRectangle.StepHeight*i,null==a.FindEventsByCoords(x,posY)){hasMoved=!0;break}}return hasMoved||(posY=y),posY}clearChart(){const a=this,rect={X:a.GraphRectangle.X,Y:a.GraphRectangle.Y,W:a.GraphRectangle.W,H:a.GraphRectangle.H};rect.X+=a.Axis.LineWidth,rect.Y-=a.Padding.Top,rect.W-=a.Axis.LineWidth,rect.W+=a.Padding.Right,rect.H-=a.Axis.LineWidth,rect.H+=a.Padding.Top,a.ctx.clearRect(rect.X,rect.Y,rect.W,rect.H),a.Debug&&a.drawRectangle(rect);const visibleEvents=undefined;a.FindVisibleEvents().forEach((function(e,i){e.Position={X:0,Y:0},e.HitBox=null}))}drawAxis(){const a=this;a.ctx.beginPath(),a.ctx.moveTo(a.GraphRectangle.X,a.GraphRectangle.Y),a.ctx.lineTo(a.GraphRectangle.X,a.GraphRectangle.H+a.GraphRectangle.Y),a.ctx.lineTo(a.GraphRectangle.W+a.GraphRectangle.X,a.GraphRectangle.H+a.GraphRectangle.Y),a.ctx.lineWidth=a.Axis.LineWidth,a.ctx.strokeStyle=a.Axis.LineColour1,a.ctx.stroke()}drawXAxis(){const a=this;let startPosX=a.GraphRectangle.X;const endPosX=a.GraphRectangle.X+a.GraphRectangle.W,posY=a.GraphRectangle.Y+a.GraphRectangle.H+a.Axis.LineWidth;let i=0;for(;!(startPosX>=endPosX);)a.ctx.beginPath(),a.ctx.moveTo(startPosX,posY),i%a.Axis.X.NoPartPerDay==0?(a.ctx.lineTo(startPosX,posY+a.Axis.X.DayLineHeight),a.ctx.strokeStyle=a.Axis.X.DayLineColour):(a.ctx.lineTo(startPosX,posY+a.Axis.X.HourLineHeight),a.ctx.strokeStyle=a.Axis.X.HourLineColour),a.ctx.lineWidth=a.Axis.LineWidth,a.ctx.stroke(),startPosX+=a.Axis.X.HourLineSpace,i++}drawXAxisLabels(){const a=this,result=a.getXAxis(),posY=a.GraphRectangle.Y+a.GraphRectangle.H+a.Axis.LineWidth;result.forEach((function(e,i){const date=a.ConvertToDate(e.Date);let writeLabel=!1;0==i?date.getDate()<25&&(writeLabel=!0):1==date.getDate()&&(writeLabel=!0);const labelSize=a.drawText(e.X,posY+a.Axis.X.DayLineHeight,a.DateToString(date,"dd"),a.Axis.Font,a.Axis.LabelColour,"center");writeLabel&&a.drawText(e.X,posY+a.Axis.X.DayLineHeight+labelSize.Height+a.Axis.LabelSpacing,a.DateToString(date,"MMMM yyyy"),a.Axis.Font,a.Axis.LabelColour,"left")}))}drawMarker(x,y,borderColour,backColour){const a=this,width=a.Marker.Width-2*a.Marker.BorderWidth;return a.ctx.beginPath(),a.ctx.arc(x,y,width,0,2*Math.PI,!1),a.ctx.fillStyle=backColour,a.ctx.fill(),a.ctx.lineWidth=a.Marker.BorderWidth,a.ctx.strokeStyle=borderColour,a.ctx.stroke(),a.measureMarker(x,y)}drawText(x,y,label,font,foreColour,align){const a=this;a.ctx.font=font,a.ctx.fillStyle=foreColour;const size=a.measureText(font,label);switch(align){case"center":x-=size.OffsetLeft;break;case"right":x-=size.Width}return a.ctx.fillText(label,x,y+size.Height),size}drawRectangle(rectangle){const a=this;a.ctx.beginPath(),a.ctx.rect(rectangle.X,rectangle.Y,rectangle.W,rectangle.H),a.ctx.lineWidth=1,a.ctx.strokeStyle="red",a.ctx.stroke()}drawVerticalLine(x,y){const a=this,linePosY=a.GraphRectangle.Y+a.GraphRectangle.H;y<=0&&(y=a.GraphRectangle.Y+a.HighlightLine.Width),a.ctx.beginPath(),a.ctx.moveTo(x,y),a.ctx.lineTo(x,linePosY-a.HighlightLine.Width),a.ctx.lineWidth=a.HighlightLine.Width,a.ctx.strokeStyle=a.HighlightLine.Colour,a.ctx.stroke()}getXAxis(){const a=this,endPosX=a.GraphRectangle.X+a.GraphRectangle.W;let result=[],x=a.GraphRectangle.X,date=a.ConvertToDate(a.ShowDate);for(date.setDate(date.getDate()-1);!(x>=endPosX);)result.push({Date:a.DateToString(date,a.DateParsePattern),X:x}),x+=a.Axis.X.HourLineSpace*a.Axis.X.NoPartPerDay,date.setDate(date.getDate()+1);return result}half(value){return value/2}measureMarker(x,y){const a=this,offset=a.half(a.Marker.Width),result=undefined;return{X:x-(offset+a.Marker.BorderWidth),Y:y-(offset+a.Marker.BorderWidth),W:a.Marker.Width+2*a.Marker.BorderWidth,H:a.Marker.Width+2*a.Marker.BorderWidth}}measureText(font,value){const a=this;a.ctx.font=font;const size=a.ctx.measureText(value);return{Width:size.width,Height:size.fontBoundingBoxAscent,OffsetLeft:a.half(size.width),OffsetTop:a.half(size.fontBoundingBoxAscent)}}ConvertToDate(value){return new Date(Date.parse(value))}}
\ No newline at end of file
+class BBTimeline{constructor(el){const a=this;a.Container=document.getElementById(el),a.DateParsePattern="yyyy-MM-dd",a.Debug=!1,a.Padding={Left:20,Top:20,Right:20,Bottom:0},a.Size={W:a.Container.innerWidth||a.Container.clientWidth,H:a.Container.innerHeight||a.Container.clientHeight},a.ctx=a.Container.getContext("2d"),a.ctx.canvas.width=a.Size.W,a.ctx.canvas.height=a.Size.H,a.Axis={LineColour1:"#CFCFCF",LineWidth:1,Font:"8pt Arial",LabelColour:"#000000",LabelSpacing:6,X:{NoPartPerDay:4,HourLineSpace:6,HourLineHeight:10,HourLineColour:"#A6A6A6",DayLineHeight:20,DayLineColour:"#282828"}},a.Marker={BorderColour:"#3A5D9C",BorderWidth:2,BackColour:"#D4DEEF",Width:10,ForeColour:"#3A5D9C",Font:"9pt Arial",CollisionMargin:8},a.HighlightLine={Colour:"#A6A6A6",Width:1},a.Events=[],a.StartDate=a.DateToString(new Date,a.DateParsePattern),a.ShowDate=a.StartDate,a.GraphRectangle=a.calcGraphRectangle(),a.Enabled=!1,a.initialiseComponents()}AddEvent(date,label,options){const a=this,_options=Object.assign(a.GenerateEventItem(),options);let event=a.FindEvent(date);null==event&&(a.Events.push(a.GenerateEvent(date)),event=a.FindEvent(date)),null!=label&&(event.Label=label),event.Events.push(_options)}CalcEndDate(){const a=this,calcdays=Math.floor(a.GraphRectangle.W/(a.Axis.X.NoPartPerDay*a.Axis.X.HourLineSpace));let date=a.ConvertToDate(a.ShowDate);return date.setDate(date.getDate()+calcdays),date.setDate(date.getDate()-1),a.DateToString(date,a.DateParsePattern)}Clear(){const a=this;a.ctx.clearRect(0,0,a.ctx.canvas.width,a.ctx.canvas.height),a.StartDate=a.DateToString(new Date,a.DateParsePattern),a.ShowDate=a.StartDate,a.Enabled=!1,a.Events=[]}DeleteMarker(date){const a=this;for(let i=0;i<a.Events.length;i++)a.Events[i].Date==date&&a.Events.splice(i,1)}FindDatePosition(date){const a=undefined,points=this.getXAxis();for(let i=0;i<points.length;i++)if(points[i].Date==date)return points[i];return null}FindVisibleEvents(){const a=this;let result=[];const availableX=undefined;return a.getXAxis().forEach((function(e){const event=a.FindEvent(e.Date);null!=event&&(event.Position.X=e.X,result.push(event))})),result}FindEvent(date){const a=this;for(let i=0;i<a.Events.length;i++)if(a.Events[i].Date==date)return a.Events[i];return null}FindEventsByCoords(x,y){const a=this;for(let i=0;i<a.Events.length;i++){const e=a.Events[i].HitBox;if(null==a.Events[i].HitBox)continue;const x2=e.X+e.W,y2=e.Y+e.H;if(x>=e.X&&x<=x2&&y>=e.Y&&y<=y2)return a.Events[i]}return null}Load(startDate){const a=this;a.StartDate=startDate,a.Show(startDate)}Show(date){const a=this;a.ConvertToDate(date)<a.ConvertToDate(a.StartDate)&&(date=a.StartDate),a.ShowDate=date,a.Enabled=!0,a.Invalidate(!0,!0)}ShowNext(){const a=this;let date=a.ConvertToDate(a.ShowDate);date.setMonth(date.getMonth()+1),a.Show(a.DateToString(date,a.DateParsePattern))}ShowPrevious(){const a=this;let date=a.ConvertToDate(a.ShowDate);date.setMonth(date.getMonth()-1),a.Show(a.DateToString(date,a.DateParsePattern))}UpdateLabel(date,label){const a=this;let event=a.FindEvent(date);null!=event&&(event.Label=label,a.Invalidate(!1,!0))}UpdateMarker(date,borderColour,backColour){const a=this;let event=a.FindEvent(date);null!=event&&(event.BorderColour=borderColour,event.BackColour=backColour,a.Invalidate(!1,!0))}initialiseComponents(){const a=this;a.ctx.canvas.addEventListener("mousedown",(function(e){if(a.Enabled){var event=a.FindEventsByCoords(e.offsetX,e.offsetY);null!=event&&(a.Debug&&console.log(event),a.OnMouseDown(this,e,event))}})),a.ctx.canvas.addEventListener("click",(function(e){if(a.Enabled){var event=a.FindEventsByCoords(e.offsetX,e.offsetY);null!=event&&(a.Debug&&console.log(event),a.OnClick(this,e,event))}}))}Invalidate(redrawAxis,redrawMarkers){const a=this;if(redrawAxis&&(a.ctx.clearRect(0,0,a.ctx.canvas.width,a.ctx.canvas.height),a.drawAxis(),a.drawXAxis(),a.drawXAxisLabels()),redrawMarkers){a.clearChart();const startPosY=a.GraphRectangle.Y+a.Marker.Width,visibleEvents=a.FindVisibleEvents();a.Debug&&console.log(visibleEvents),visibleEvents.forEach((function(e,i){let posY=a.calcMarkerPosition(e.Position.X,startPosY);a.drawVerticalLine(e.Position.X,posY);const markerRectangle=a.drawMarker(e.Position.X,posY,e.BorderColour,e.BackColour),labelSize=a.drawText(markerRectangle.X+markerRectangle.W+a.GraphRectangle.Margin,markerRectangle.Y,e.Label,a.Marker.Font,a.Marker.ForeColour,"left");e.Position={X:e.Position.X,Y:posY},e.HitBox={X:markerRectangle.X,Y:markerRectangle.Y,W:markerRectangle.W+a.GraphRectangle.Margin+labelSize.Width+a.Marker.CollisionMargin,H:markerRectangle.H},a.Debug&&a.drawRectangle(e.HitBox),a.Debug&&console.log(e)}))}a.Debug&&a.drawRectangle(a.GraphRectangle)}GenerateEvent(date){const a=this;return{Date:date,Label:"",Position:{X:0,Y:0},Events:[],HitBox:null,BorderColour:a.Marker.BorderColour,BackColour:a.Marker.BackColour}}GenerateEventItem(){return{Title:"",Description:"",Link:"",Tag:null}}DateToString(date,pattern){let result=pattern;return result=result.replace("fffffff",date.getMilliseconds().toString().padStart(7,"0")),result=result.replace("ffffff",date.getMilliseconds().toString().padStart(6,"0")),result=result.replace("fffff",date.getMilliseconds().toString().padStart(5,"0")),result=result.replace("yyyy",date.getFullYear().toString().padStart(4,"0")),result=result.replace("MMMM","{1}"),result=result.replace("dddd","{2}"),result=result.replace("ffff",date.getMilliseconds().toString().padStart(4,"0")),result=result.replace("yyy",date.getFullYear().toString().padStart(3,"0")),result=result.replace("MMM","{3}"),result=result.replace("ddd","{4}"),result=result.replace("fff",date.getMilliseconds().toString().padStart(3,"0")),result=result.replace("zzz",""),result=result.replace("yy",date.getFullYear().toString().slice(-2)),result=result.replace("MM",(date.getMonth()+1).toString().padStart(2,"0")),result=result.replace("dd",date.getDate().toString().padStart(2,"0")),result=result.replace("HH",date.getHours().toString().padStart(2,"0")),result=result.replace("hh",(date.getHours()>12?date.getHours()-12:date.getHours()).toString().padStart(2,"0")),result=result.replace("mm",date.getMinutes().toString().padStart(2,"0")),result=result.replace("ss",date.getSeconds().toString().padStart(2,"0")),result=result.replace("ff",date.getMilliseconds().toString().padStart(2,"0")),result=result.replace("tt","{5}"),result=result.replace("zz",""),result=result.replace("y",date.getFullYear().toString()),result=result.replace("M",(date.getMonth()+1).toString()),result=result.replace("d",date.getDate().toString()),result=result.replace("H",date.getHours().toString()),result=result.replace("h",(date.getHours()>12?date.getHours()-12:date.getHours()).toString()),result=result.replace("m",date.getMinutes().toString()),result=result.replace("s",date.getSeconds().toString()),result=result.replace("z",""),result=result.replace("t","{6}"),result=result.replace("Z",""),result=result.replace("{1}",date.toLocaleString("default",{month:"long"})),result=result.replace("{2}",date.toLocaleString("default",{weekday:"long"})),result=result.replace("{3}",date.toLocaleString("default",{month:"short"})),result=result.replace("{4}",date.toLocaleString("default",{weekday:"short"})),result=result.replace("{5}",date.getHours()>=12?"PM":"AM"),result=result.replace("{6}",date.getHours()>=12?"P":"A"),result}OnMouseDown(sender,e,event){}OnClick(sender,e,event){}calcGraphRectangle(){const a=this,xAxisHeight=a.calcXAxisHeight();let result={X:a.Padding.Left,Y:a.Padding.Top,W:a.Size.W-(a.Padding.Left+a.Padding.Right),H:a.Size.H-(a.Padding.Top+a.Padding.Bottom)-xAxisHeight,Margin:2*a.Marker.BorderWidth};return result.StepHeight=a.Marker.Width+result.Margin,result.NoStep=Math.floor(result.H/result.StepHeight),result}calcXAxisHeight(){const a=this,labelSize=undefined,result=undefined;return a.measureText(a.Axis.Font,"0").Height+a.Axis.LabelSpacing+2*a.Axis.X.DayLineHeight}calcMarkerPosition(x,y){const a=this;let hasMoved=!1,posY=y;for(let i=0;i<a.GraphRectangle.NoStep;i++){var clippedEvent;if(posY=y+a.GraphRectangle.StepHeight*i,null==a.FindEventsByCoords(x,posY)){hasMoved=!0;break}}return hasMoved||(posY=y),posY}clearChart(){const a=this,rect={X:a.GraphRectangle.X,Y:a.GraphRectangle.Y,W:a.GraphRectangle.W,H:a.GraphRectangle.H};rect.X+=a.Axis.LineWidth,rect.Y-=a.Padding.Top,rect.W-=a.Axis.LineWidth,rect.W+=a.Padding.Right,rect.H-=a.Axis.LineWidth,rect.H+=a.Padding.Top,a.ctx.clearRect(rect.X,rect.Y,rect.W,rect.H),a.Debug&&a.drawRectangle(rect);const visibleEvents=undefined;a.FindVisibleEvents().forEach((function(e,i){e.Position={X:0,Y:0},e.HitBox=null}))}drawAxis(){const a=this;a.ctx.beginPath(),a.ctx.moveTo(a.GraphRectangle.X,a.GraphRectangle.Y),a.ctx.lineTo(a.GraphRectangle.X,a.GraphRectangle.H+a.GraphRectangle.Y),a.ctx.lineTo(a.GraphRectangle.W+a.GraphRectangle.X,a.GraphRectangle.H+a.GraphRectangle.Y),a.ctx.lineWidth=a.Axis.LineWidth,a.ctx.strokeStyle=a.Axis.LineColour1,a.ctx.stroke()}drawXAxis(){const a=this;let startPosX=a.GraphRectangle.X;const endPosX=a.GraphRectangle.X+a.GraphRectangle.W,posY=a.GraphRectangle.Y+a.GraphRectangle.H+a.Axis.LineWidth;let i=0;for(;!(startPosX>=endPosX);)a.ctx.beginPath(),a.ctx.moveTo(startPosX,posY),i%a.Axis.X.NoPartPerDay==0?(a.ctx.lineTo(startPosX,posY+a.Axis.X.DayLineHeight),a.ctx.strokeStyle=a.Axis.X.DayLineColour):(a.ctx.lineTo(startPosX,posY+a.Axis.X.HourLineHeight),a.ctx.strokeStyle=a.Axis.X.HourLineColour),a.ctx.lineWidth=a.Axis.LineWidth,a.ctx.stroke(),startPosX+=a.Axis.X.HourLineSpace,i++}drawXAxisLabels(){const a=this,result=a.getXAxis(),posY=a.GraphRectangle.Y+a.GraphRectangle.H+a.Axis.LineWidth;result.forEach((function(e,i){const date=a.ConvertToDate(e.Date);let writeLabel=!1;0==i?date.getDate()<25&&(writeLabel=!0):1==date.getDate()&&(writeLabel=!0);const labelSize=a.drawText(e.X,posY+a.Axis.X.DayLineHeight,a.DateToString(date,"dd"),a.Axis.Font,a.Axis.LabelColour,"center");writeLabel&&a.drawText(e.X,posY+a.Axis.X.DayLineHeight+labelSize.Height+a.Axis.LabelSpacing,a.DateToString(date,"MMMM yyyy"),a.Axis.Font,a.Axis.LabelColour,"left")}))}drawMarker(x,y,borderColour,backColour){const a=this,width=a.Marker.Width-2*a.Marker.BorderWidth;return a.ctx.beginPath(),a.ctx.arc(x,y,width,0,2*Math.PI,!1),a.ctx.fillStyle=backColour,a.ctx.fill(),a.ctx.lineWidth=a.Marker.BorderWidth,a.ctx.strokeStyle=borderColour,a.ctx.stroke(),a.measureMarker(x,y)}drawText(x,y,label,font,foreColour,align){const a=this;a.ctx.font=font,a.ctx.fillStyle=foreColour;const size=a.measureText(font,label);switch(align){case"center":x-=size.OffsetLeft;break;case"right":x-=size.Width}return a.ctx.fillText(label,x,y+size.Height),size}drawRectangle(rectangle){const a=this;a.ctx.beginPath(),a.ctx.rect(rectangle.X,rectangle.Y,rectangle.W,rectangle.H),a.ctx.lineWidth=1,a.ctx.strokeStyle="red",a.ctx.stroke()}drawVerticalLine(x,y){const a=this,linePosY=a.GraphRectangle.Y+a.GraphRectangle.H;y<=0&&(y=a.GraphRectangle.Y+a.HighlightLine.Width),a.ctx.beginPath(),a.ctx.moveTo(x,y),a.ctx.lineTo(x,linePosY-a.HighlightLine.Width),a.ctx.lineWidth=a.HighlightLine.Width,a.ctx.strokeStyle=a.HighlightLine.Colour,a.ctx.stroke()}getXAxis(){const a=this,endPosX=a.GraphRectangle.X+a.GraphRectangle.W;let result=[],x=a.GraphRectangle.X,date=a.ConvertToDate(a.ShowDate);for(date.setDate(date.getDate()-1);!(x>=endPosX);)result.push({Date:a.DateToString(date,a.DateParsePattern),X:x}),x+=a.Axis.X.HourLineSpace*a.Axis.X.NoPartPerDay,date.setDate(date.getDate()+1);return result}half(value){return value/2}measureMarker(x,y){const a=this,offset=a.half(a.Marker.Width),result=undefined;return{X:x-(offset+a.Marker.BorderWidth),Y:y-(offset+a.Marker.BorderWidth),W:a.Marker.Width+2*a.Marker.BorderWidth,H:a.Marker.Width+2*a.Marker.BorderWidth}}measureText(font,value){const a=this;a.ctx.font=font;const size=a.ctx.measureText(value);return{Width:size.width,Height:size.fontBoundingBoxAscent,OffsetLeft:a.half(size.width),OffsetTop:a.half(size.fontBoundingBoxAscent)}}ConvertToDate(value){return new Date(Date.parse(value))}}
\ No newline at end of file
diff --git a/demo-test.html b/demo-test.html
index 26ade58..1a5feb6 100644
--- a/demo-test.html
+++ b/demo-test.html
@@ -11,6 +11,10 @@
   <!-- <link href="http://cdn.hiimray.co.uk/8206c600-707c-469e-8d49-a76ae35782af/bootstrap/5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
 
   <script src="bbtimeline.js"></script>
+  <script src="bbtimeline-canvas.js"></script>
+  <script src="bbtimeline-background-canvas.js"></script>
+  <script src="bbtimeline-foreground-canvas.js"></script>
+
   <!-- <script src="bbtimeline.min.js"></script> -->
 
   <title></title>
@@ -19,11 +23,10 @@
 
   <div class="row">
     <div class="column1">
-      <canvas id="myCanvas"></canvas>
+      <div id="myCanvas"></div>
 
       <p>
         <textarea id="memoBox1" readonly></textarea>
-
       </p>
     </div>
     <div class="column2">
@@ -88,16 +91,6 @@ body {
   padding: 20px;
 }
 
-canvas {
-  border-style: solid;
-  border-width: 1px;
-  border-color: #000000;
-  width: 100%;
-  height: 300px;
-  padding: 0;
-  margin: 0;
-}
-
 textarea {
   border-style: solid;
   border-width: 1px;
@@ -107,6 +100,7 @@ textarea {
   width: 100%;
 }
 
+
 .column1 {
   flex: 70%;
   padding: 20px;
@@ -119,6 +113,17 @@ textarea {
   display: flex;
 }
 
+
+#myCanvas {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #000000;
+  width: 100%;
+  height: 300px;
+  padding: 0;
+  margin: 0;
+}
+
   </style>
 
   <script>