🐛 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 · Jun 27, 2021 · b579c81 · b579c81
1 parent 922ff1d
commit b579c81
Show file tree

Hide file tree

Showing 14 changed files with 98 additions and 51 deletions.
diff --git a/sketches/017/design/index.ts b/sketches/017/design/index.ts
@@ -23,7 +23,14 @@ 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 +88,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,14 @@ 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],
@@ -79,9 +86,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,14 @@ 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],
@@ -84,15 +91,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,14 @@ 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],
@@ -99,15 +106,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,14 @@ 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],
@@ -103,9 +110,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,14 @@ 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],
@@ -103,17 +110,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,14 @@ 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],
@@ -91,9 +98,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,14 @@ 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],
@@ -95,9 +102,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,14 @@ 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)),
@@ -93,9 +100,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
@@ -129,6 +129,7 @@ const drawShape = (args: Shape) => {
 
 export const design = ({
   c,
+  createCanvas,
   simplex,
   width,
   height,
@@ -210,9 +211,7 @@ export const 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
@@ -127,6 +127,7 @@ const drawShape = (args: Shape) => {
 
 export const design = ({
   c,
+  createCanvas,
   simplex,
   width,
   height,
@@ -230,9 +231,7 @@ export const 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