🐛 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 (Automattic/node-canvas#1769) but a new version of the lib hasn't been released yet. I won't merge this until the package upgrade.
pouretrebelle · Apr 30, 2021 · 5928d66 · 5928d66
1 parent b7edc21
commit 5928d66
Show file tree

Hide file tree

Showing 14 changed files with 35 additions and 53 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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