Fixed stroke_colour

src/app.js

@@ -91,10 +91,10 @@ HTML.rectangle.addEventListener("click", () => {
   showElement(HTML.palette)
 })
 
-var svg = HTML.wheel.children
+let svg = HTML.wheel.children
 for (var i = 1; i < svg.length; i++) {
   svg[i].addEventListener("click", (event) => {
-    var paletteColour = event.target.getAttribute("fill")
+    let paletteColour = event.target.getAttribute("fill")
     HTML.rectangle.style.backgroundColor = paletteColour
     canvas.setStrokeColour(paletteColour)
     hideElement(HTML.palette)
@@ -110,7 +110,7 @@ function hideElement(element) {
 }
 
 HTML.picker.addEventListener("change", () => {
-  var paletteColour = event.target.value
+  let paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   canvas.setStrokeColour(paletteColour)
 })
@@ -176,7 +176,7 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
   if (currentTool == tools.PEN) {
     pathIDsByPointerID.set(
       e.pointerId,
-      room.addPath([...mousePos, e.pressure, canvas.stroke_colour]),
+      room.addPath([...mousePos, e.pressure, canvas.getStrokeColour()]),
     )
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)
@@ -198,7 +198,7 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
       e.pressure,
-      canvas.stroke_colour,
+      canvas.getStrokeColour(),
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)

src/canvas.js

@@ -16,7 +16,7 @@ const lineFn = line()
 
 const pathGroupElems = new Map()
 
-export var stroke_colour = "blue"
+let stroke_colour = "blue"
 export const MIN_STROKE_RADIUS = 0.1
 export const MAX_STROKE_RADIUS = 3.9
 
@@ -35,7 +35,7 @@ const createPathElem = (d, width) => {
 
 export const renderPath = (id, points) => {
   points = points.filter(([x]) => x != null)
-  var colour = ""
+  let colour = ""
 
   // Split up points into completely non-erased segments.
   let segments = [[]]
@@ -125,3 +125,7 @@ canvas.addEventListener("touchmove", (e) => e.preventDefault())
 export function setStrokeColour(colour) {
   stroke_colour = colour
 }
+
+export function getStrokeColour() {
+  return stroke_colour
+}