From 5928d6666b626a0ac2c3c7becc0aa9ee67ce7bbb Mon Sep 17 00:00:00 2001
From: Charlotte Dann <hi@cha.rs>
Date: Fri, 30 Apr 2021 15:15:27 +0100
Subject: [PATCH] :bug: Replace references to document.createElement

In some sketches we create temporary canvases for layering and transforms, but on the server-side we can't reference document. This passes in a createCanvas function which uses document on the client side and node-canvas on the server side.

N.B. This is still causing errors on sketches that have multiple
canvases because c.getTransform isn't implemented in v2.7.0 if
node-canvas. This was fixed a week ago
(https://github.com/Automattic/node-canvas/pull/1769) but a new version
of the lib hasn't been released yet. I won't merge this until the
package upgrade.
---
 sketches/017/design/index.ts      |  6 ++----
 sketches/018/design/index.ts      |  6 ++----
 sketches/019/design/index.ts      | 10 +++-------
 sketches/020/design/index.ts      | 10 +++-------
 sketches/021/design/index.ts      |  6 ++----
 sketches/022/design/index.ts      | 10 +++-------
 sketches/023/design/index.ts      |  6 ++----
 sketches/024/design/index.ts      |  6 ++----
 sketches/025/design/index.ts      |  6 ++----
 sketches/027/design/index.ts      |  6 ++----
 sketches/028/design/index.ts      |  6 ++----
 src/lib/draw.ts                   |  8 ++++++++
 src/pages/api/preview/[sketch].ts |  1 +
 src/types.ts                      |  1 +
 14 files changed, 35 insertions(+), 53 deletions(-)

diff --git a/sketches/017/design/index.ts b/sketches/017/design/index.ts
index dbf16e7..6d83f26 100644
--- a/sketches/017/design/index.ts
+++ b/sketches/017/design/index.ts
@@ -23,7 +23,7 @@ export enum Seeds {
   Color,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -81,9 +81,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
   c.save()
 
   layers.forEach(({ color, composite, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.setTransform(c.getTransform())
 
diff --git a/sketches/018/design/index.ts b/sketches/018/design/index.ts
index 715976f..e1e50a4 100644
--- a/sketches/018/design/index.ts
+++ b/sketches/018/design/index.ts
@@ -22,7 +22,7 @@ export enum Seeds {
   Color,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -81,9 +81,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
   c.save()
 
   layers.forEach(({ color, composite, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.setTransform(c.getTransform())
 
diff --git a/sketches/019/design/index.ts b/sketches/019/design/index.ts
index 288a227..597fd7b 100644
--- a/sketches/019/design/index.ts
+++ b/sketches/019/design/index.ts
@@ -21,7 +21,7 @@ export enum Seeds {
   Color,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -80,15 +80,11 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
   c.save()
   const transform = c.getTransform()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
 
   layers.forEach(({ color, composite, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.globalAlpha = SPINE_OPACITY
 
diff --git a/sketches/020/design/index.ts b/sketches/020/design/index.ts
index 21fd18a..117d14a 100644
--- a/sketches/020/design/index.ts
+++ b/sketches/020/design/index.ts
@@ -24,7 +24,7 @@ export enum Seeds {
   Size,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -93,15 +93,11 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
   c.save()
   const transform = c.getTransform()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
 
   layers.forEach(({ color, size, composite, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.globalAlpha = STROKE_OPACITY
 
diff --git a/sketches/021/design/index.ts b/sketches/021/design/index.ts
index e1d63d3..25be5d4 100644
--- a/sketches/021/design/index.ts
+++ b/sketches/021/design/index.ts
@@ -25,7 +25,7 @@ export enum Seeds {
   Size,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -93,9 +93,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
 
   c.save()
   layers.forEach(({ color, size, composite, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.setTransform(c.getTransform())
     layerC.globalAlpha = STROKE_OPACITY
diff --git a/sketches/022/design/index.ts b/sketches/022/design/index.ts
index dc2fc53..ab501ba 100644
--- a/sketches/022/design/index.ts
+++ b/sketches/022/design/index.ts
@@ -30,7 +30,7 @@ export enum Seeds {
   Bristle,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -99,17 +99,13 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
 
   c.save()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
   tempC.globalAlpha = STROKE_OPACITY
 
   layers.forEach(({ hue, lightness, size, opacity }, layerI) => {
-    const layerCanvas = document.createElement('canvas')
-    layerCanvas.width = c.canvas.width
-    layerCanvas.height = c.canvas.height
+    const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
     const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
     layerC.setTransform(c.getTransform())
     layerC.globalAlpha = STROKE_OPACITY
diff --git a/sketches/023/design/index.ts b/sketches/023/design/index.ts
index 006a549..9dee8b6 100644
--- a/sketches/023/design/index.ts
+++ b/sketches/023/design/index.ts
@@ -31,7 +31,7 @@ export enum Seeds {
   Bristle,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -89,9 +89,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
 
   c.save()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
   tempC.globalAlpha = STROKE_OPACITY
diff --git a/sketches/024/design/index.ts b/sketches/024/design/index.ts
index 2ae9af9..aae493b 100644
--- a/sketches/024/design/index.ts
+++ b/sketches/024/design/index.ts
@@ -33,7 +33,7 @@ export enum Seeds {
   Bristle,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layerHues = arrayValuesFromSimplex(
     HUES,
     simplex[Seeds.Color],
@@ -90,9 +90,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
 
   c.save()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
   tempC.globalAlpha = STROKE_OPACITY
diff --git a/sketches/025/design/index.ts b/sketches/025/design/index.ts
index 29028f7..fae5a38 100644
--- a/sketches/025/design/index.ts
+++ b/sketches/025/design/index.ts
@@ -32,7 +32,7 @@ export enum Seeds {
   Bristle,
 }
 
-export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, noiseStart }: Design) => {
   const layers = Array.from(Array(LAYER_COUNT)).map((_, i) => {
     const hue = map(randomFromNoise(simplex[Seeds.Color].noise2D(10 + i * 23.1, 14.3)), 0, 1, HUE_MIN, HUE_MAX)
     let l = Math.round(
@@ -85,9 +85,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
 
   c.save()
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
   tempC.globalAlpha = STROKE_OPACITY
diff --git a/sketches/027/design/index.ts b/sketches/027/design/index.ts
index 0c21e12..003bc13 100644
--- a/sketches/027/design/index.ts
+++ b/sketches/027/design/index.ts
@@ -105,7 +105,7 @@ const drawShape = (args: Shape) => {
   c.restore()
 }
 
-export const design = ({ c, simplex, width, height, bleed, noiseStart }: Design) => {
+export const design = ({ c, createCanvas,  simplex, width, height, bleed, noiseStart }: Design) => {
   const hues: number[] = []
   for (let i = 0; i < 5; i++) {
     hues.push(Math.floor(randomFromNoise(simplex[Seeds.Color].noise2D(5.25 + i, 3.33)) * 360))
@@ -159,9 +159,7 @@ export const design = ({ c, simplex, width, height, bleed, noiseStart }: Design)
   c.globalCompositeOperation = 'screen'
   c.globalAlpha = LINE_OPACITY
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
 
diff --git a/sketches/028/design/index.ts b/sketches/028/design/index.ts
index 284307a..038d47c 100644
--- a/sketches/028/design/index.ts
+++ b/sketches/028/design/index.ts
@@ -84,7 +84,7 @@ const drawShape = (args: Shape) => {
   c.restore()
 }
 
-export const design = ({ c, simplex, width, height, bleed, noiseStart }: Design) => {
+export const design = ({ c, createCanvas, simplex, width, height, bleed, noiseStart }: Design) => {
   const hues: number[] = []
   for (let i = 0; i < 5; i++) {
     hues.push(Math.floor(randomFromNoise(simplex[Seeds.Color].noise2D(5.25 + i, 3.33)) * 360))
@@ -157,9 +157,7 @@ export const design = ({ c, simplex, width, height, bleed, noiseStart }: Design)
   c.globalCompositeOperation = 'multiply'
   c.globalAlpha = LINE_OPACITY
 
-  const tempCanvas = document.createElement('canvas')
-  tempCanvas.width = c.canvas.width
-  tempCanvas.height = c.canvas.height
+  const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
   const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
   tempC.setTransform(c.getTransform())
 
diff --git a/src/lib/draw.ts b/src/lib/draw.ts
index 6c6df65..d16602b 100644
--- a/src/lib/draw.ts
+++ b/src/lib/draw.ts
@@ -8,6 +8,13 @@ interface DrawArgs {
   state: State
 }
 
+const createCanvas = (width: number, height: number) => {
+  const canvas = document.createElement('canvas')
+  canvas.width = width
+  canvas.height = height
+  return canvas
+}
+
 export const drawBackground = ({ canvas, c, state }: DrawArgs) => {
   if (!state.sketch) return
 
@@ -30,6 +37,7 @@ export const drawDesign = ({ c, state }: Pick<DrawArgs, 'c' | 'state'>) => {
 
   state.sketch.design({
     c,
+    createCanvas,
     simplex,
     seed: state.designNoiseSeeds,
     noiseStart: state.noiseStart,
diff --git a/src/pages/api/preview/[sketch].ts b/src/pages/api/preview/[sketch].ts
index 69d7f00..3f6ba94 100644
--- a/src/pages/api/preview/[sketch].ts
+++ b/src/pages/api/preview/[sketch].ts
@@ -51,6 +51,7 @@ const handler = async (req: Req, res: Res) => {
 
   design({
     c: designC,
+    createCanvas,
     seed: designSeeds,
     simplex: designSeeds.map(seed => new SimplexNoise(seed)),
     noiseStart: 0,
diff --git a/src/types.ts b/src/types.ts
index 0acb60e..2ab1463 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -99,6 +99,7 @@ export interface Cut {
 
 export interface Design {
   c: CanvasRenderingContext2D
+  createCanvas: (width: number, height: number) => HTMLCanvasElement | OffscreenCanvas
   simplex: SimplexNoise[]
   seed: string[]
   width: number