From b579c81d694f5148752d5953c39b27818d2df7ab Mon Sep 17 00:00:00 2001 From: Charlotte Dann 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 | 13 +++++++++---- sketches/018/design/index.ts | 13 +++++++++---- sketches/019/design/index.ts | 17 ++++++++++------- sketches/020/design/index.ts | 17 ++++++++++------- sketches/021/design/index.ts | 13 +++++++++---- sketches/022/design/index.ts | 17 ++++++++++------- sketches/023/design/index.ts | 13 +++++++++---- sketches/024/design/index.ts | 13 +++++++++---- sketches/025/design/index.ts | 13 +++++++++---- sketches/027/design/index.ts | 5 ++--- sketches/028/design/index.ts | 5 ++--- src/lib/draw.ts | 8 ++++++++ src/pages/api/preview/[sketch].ts | 1 + src/types.ts | 1 + 14 files changed, 98 insertions(+), 51 deletions(-) diff --git a/sketches/017/design/index.ts b/sketches/017/design/index.ts index dbf16e7..3205445 100644 --- 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 index 80fbf57..2334c93 100644 --- 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 index 07948d8..bb68dfa 100644 --- 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 index 5f65310..f5c6b09 100644 --- 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 index 4f9e158..b57bfaa 100644 --- 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 index e74b1fc..fa59bc0 100644 --- 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 index 22217ec..fbd5eb0 100644 --- 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 index 2dc2ac4..f78b76d 100644 --- 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 index 7670dbe..9f3dfbe 100644 --- 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 index 9afb407..642a90a 100644 --- 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 index bdd98f7..262cb66 100644 --- 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 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) => { 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