diff --git a/src/app.js b/src/app.js
index 832906420a6224c7af048e7c06676b2e78a1781f..934bd0f381438a79d858be269cb31461b8bf5656 100644
--- a/src/app.js
+++ b/src/app.js
@@ -10,6 +10,28 @@ const TEST_ROOM = "imperial"
 
 let room = null
 
+let strokeColour = "#0000ff"
+let strokeRadius = 5
+
+const MIN_PRESSURE_FACTOR = 0.1
+const MAX_PRESSURE_FACTOR = 1.5
+
+// This is a quadratic such that:
+// - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
+// - getPressureFactor(0.5) = 1.0
+// - getPressureFactor(1.0) = MAX_PRESSURE_FACTOR
+// For sensible results, maintain that:
+// - 0.0 <= MIN_PRESSURE_FACTOR <= 1.0
+// - 1.0 <= MAX_PRESSURE_FACTOR
+// For intuitive results, maintain that:
+// - MAX_PRESSURE_FACTOR <= ~2.0
+const getPressureFactor = (pressure) => {
+  const a = 2 * (MAX_PRESSURE_FACTOR + MIN_PRESSURE_FACTOR) - 4
+  const b = -MAX_PRESSURE_FACTOR - 3 * MIN_PRESSURE_FACTOR + 4
+  const c = MIN_PRESSURE_FACTOR
+  return a * pressure ** 2 + b * pressure + c
+}
+
 const onRoomConnect = (room_) => {
   room = room_
 
@@ -133,7 +155,7 @@ for (let i = 1; i < svg.length; i++) {
     HTML.rectangle.style.backgroundColor = paletteColour
     HTML.picker.value = paletteColour
     HTML.labelColours.style.backgroundColor = paletteColour
-    canvas.setStrokeColour(paletteColour)
+    strokeColour = paletteColour
     hideElement(HTML.palette)
   })
 }
@@ -150,14 +172,14 @@ HTML.picker.addEventListener("change", () => {
   const paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   HTML.labelColours.style.backgroundColor = paletteColour
-  canvas.setStrokeColour(paletteColour)
+  strokeColour = paletteColour
 })
 
 HTML.output.innerHTML = HTML.slider.value
 
 HTML.slider.oninput = function() {
   HTML.output.innerHTML = this.value
-  canvas.setStrokeRadius(this.value / 10)
+  strokeRadius = this.value / 10
 }
 
 const x = window.matchMedia(
@@ -176,7 +198,7 @@ HTML.picker.addEventListener("change", () => {
   const paletteColour = event.target.value
   HTML.rectangle.style.backgroundColor = paletteColour
   HTML.labelColours.style.backgroundColor = paletteColour
-  canvas.setStrokeColour(paletteColour)
+  strokeColour = paletteColour
 })
 
 HTML.eraserButton.addEventListener("click", () => {
@@ -301,8 +323,8 @@ canvas.input.addEventListener("strokestart", ({ detail: e }) => {
       e.pointerId,
       room.addPath([
         ...mousePos,
-        canvas.getStrokeRadius(e.pressure),
-        canvas.getStrokeColour(),
+        strokeRadius * getPressureFactor(e.pressure),
+        strokeColour,
       ]),
     )
   } else if (currentTool == tools.ERASER) {
@@ -324,8 +346,8 @@ canvas.input.addEventListener("strokemove", ({ detail: e }) => {
   if (currentTool == tools.PEN) {
     room.extendPath(pathIDsByPointerID.get(e.pointerId), [
       ...mousePos,
-      canvas.getStrokeRadius(e.pressure),
-      canvas.getStrokeColour(),
+      strokeRadius * getPressureFactor(e.pressure),
+      strokeColour,
     ])
   } else if (currentTool == tools.ERASER) {
     erasePoint(mousePos)
diff --git a/src/canvas.js b/src/canvas.js
index 5aceb59fdb0b37a8a7b7b7749204d627a87f3b16..d04e6fa2f7ef3d03a9fbc041f622618010c2df25 100644
--- a/src/canvas.js
+++ b/src/canvas.js
@@ -16,9 +16,6 @@ const lineFn = line()
 
 const pathGroupElems = new Map()
 
-let strokeColour = "#0000ff"
-let strokeRadius = 5
-
 const MAX_POINT_DISTANCE = 5
 const MAX_RADIUS_DELTA = 0.05
 
@@ -168,38 +165,3 @@ canvas.addEventListener("pointerup", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointerleave", dispatchPointerEvent("strokeend"))
 canvas.addEventListener("pointermove", dispatchPointerEvent("strokemove"))
 canvas.addEventListener("touchmove", (e) => e.preventDefault())
-
-export function setStrokeColour(colour) {
-  strokeColour = colour
-}
-
-export function getStrokeColour() {
-  return strokeColour
-}
-
-const MIN_PRESSURE_FACTOR = 0.1
-const MAX_PRESSURE_FACTOR = 1.5
-
-// This is a quadratic such that:
-// - getPressureFactor(0.0) = MIN_PRESSURE_FACTOR
-// - getPressureFactor(0.5) = 1.0
-// - getPressureFactor(1.0) = MAX_PRESSURE_FACTOR
-// For sensible results, maintain that:
-// - 0.0 <= MIN_PRESSURE_FACTOR <= 1.0
-// - 1.0 <= MAX_PRESSURE_FACTOR
-// For intuitive results, maintain that:
-// - MAX_PRESSURE_FACTOR <= ~2.0
-const getPressureFactor = (pressure) => {
-  const a = 2 * (MAX_PRESSURE_FACTOR + MIN_PRESSURE_FACTOR) - 4
-  const b = -MAX_PRESSURE_FACTOR - 3 * MIN_PRESSURE_FACTOR + 4
-  const c = MIN_PRESSURE_FACTOR
-  return a * pressure ** 2 + b * pressure + c
-}
-
-export function getStrokeRadius(pressure) {
-  return strokeRadius * getPressureFactor(pressure)
-}
-
-export function setStrokeRadius(radius) {
-  strokeRadius = radius
-}