Skip to content

Commit c021022

Browse files
pouretrebellepouretrebelle
committed
🐛 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.
1 parent caf8298 commit c021022

File tree

14 files changed

+98
-51
lines changed

14 files changed

+98
-51
lines changed

‎sketches/017/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,14 @@ export enum Seeds {
2323
Color,
2424
}
2525

26-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
26+
export const design = ({
27+
c,
28+
createCanvas,
29+
simplex,
30+
width,
31+
height,
32+
noiseStart,
33+
}: Design) => {
2734
const layerHues = arrayValuesFromSimplex(
2835
HUES,
2936
simplex[Seeds.Color],
@@ -81,9 +88,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
8188
c.save()
8289

8390
layers.forEach(({ color, composite, opacity }, layerI) => {
84-
const layerCanvas = document.createElement('canvas')
85-
layerCanvas.width = c.canvas.width
86-
layerCanvas.height = c.canvas.height
91+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
8792
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
8893
layerC.setTransform(c.getTransform())
8994

‎sketches/018/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,14 @@ export enum Seeds {
2222
Color,
2323
}
2424

25-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
25+
export const design = ({
26+
c,
27+
createCanvas,
28+
simplex,
29+
width,
30+
height,
31+
noiseStart,
32+
}: Design) => {
2633
const layerHues = arrayValuesFromSimplex(
2734
HUES,
2835
simplex[Seeds.Color],
@@ -79,9 +86,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
7986
c.save()
8087

8188
layers.forEach(({ color, composite, opacity }, layerI) => {
82-
const layerCanvas = document.createElement('canvas')
83-
layerCanvas.width = c.canvas.width
84-
layerCanvas.height = c.canvas.height
89+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
8590
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
8691
layerC.setTransform(c.getTransform())
8792

‎sketches/019/design/index.ts

+10-7
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,14 @@ export enum Seeds {
2121
Color,
2222
}
2323

24-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
24+
export const design = ({
25+
c,
26+
createCanvas,
27+
simplex,
28+
width,
29+
height,
30+
noiseStart,
31+
}: Design) => {
2532
const layerHues = arrayValuesFromSimplex(
2633
HUES,
2734
simplex[Seeds.Color],
@@ -84,15 +91,11 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
8491
c.save()
8592
const transform = c.getTransform()
8693

87-
const tempCanvas = document.createElement('canvas')
88-
tempCanvas.width = c.canvas.width
89-
tempCanvas.height = c.canvas.height
94+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
9095
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
9196

9297
layers.forEach(({ color, composite, opacity }, layerI) => {
93-
const layerCanvas = document.createElement('canvas')
94-
layerCanvas.width = c.canvas.width
95-
layerCanvas.height = c.canvas.height
98+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
9699
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
97100
layerC.globalAlpha = SPINE_OPACITY
98101

‎sketches/020/design/index.ts

+10-7
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,14 @@ export enum Seeds {
2424
Size,
2525
}
2626

27-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
27+
export const design = ({
28+
c,
29+
createCanvas,
30+
simplex,
31+
width,
32+
height,
33+
noiseStart,
34+
}: Design) => {
2835
const layerHues = arrayValuesFromSimplex(
2936
HUES,
3037
simplex[Seeds.Color],
@@ -99,15 +106,11 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
99106
c.save()
100107
const transform = c.getTransform()
101108

102-
const tempCanvas = document.createElement('canvas')
103-
tempCanvas.width = c.canvas.width
104-
tempCanvas.height = c.canvas.height
109+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
105110
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
106111

107112
layers.forEach(({ color, size, composite, opacity }, layerI) => {
108-
const layerCanvas = document.createElement('canvas')
109-
layerCanvas.width = c.canvas.width
110-
layerCanvas.height = c.canvas.height
113+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
111114
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
112115
layerC.globalAlpha = STROKE_OPACITY
113116

‎sketches/021/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,14 @@ export enum Seeds {
2525
Size,
2626
}
2727

28-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
28+
export const design = ({
29+
c,
30+
createCanvas,
31+
simplex,
32+
width,
33+
height,
34+
noiseStart,
35+
}: Design) => {
2936
const layerHues = arrayValuesFromSimplex(
3037
HUES,
3138
simplex[Seeds.Color],
@@ -103,9 +110,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
103110

104111
c.save()
105112
layers.forEach(({ color, size, composite, opacity }, layerI) => {
106-
const layerCanvas = document.createElement('canvas')
107-
layerCanvas.width = c.canvas.width
108-
layerCanvas.height = c.canvas.height
113+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
109114
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
110115
layerC.setTransform(c.getTransform())
111116
layerC.globalAlpha = STROKE_OPACITY

‎sketches/022/design/index.ts

+10-7
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,14 @@ export enum Seeds {
3030
Bristle,
3131
}
3232

33-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
33+
export const design = ({
34+
c,
35+
createCanvas,
36+
simplex,
37+
width,
38+
height,
39+
noiseStart,
40+
}: Design) => {
3441
const layerHues = arrayValuesFromSimplex(
3542
HUES,
3643
simplex[Seeds.Color],
@@ -103,17 +110,13 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
103110

104111
c.save()
105112

106-
const tempCanvas = document.createElement('canvas')
107-
tempCanvas.width = c.canvas.width
108-
tempCanvas.height = c.canvas.height
113+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
109114
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
110115
tempC.setTransform(c.getTransform())
111116
tempC.globalAlpha = STROKE_OPACITY
112117

113118
layers.forEach(({ hue, lightness, size, opacity }, layerI) => {
114-
const layerCanvas = document.createElement('canvas')
115-
layerCanvas.width = c.canvas.width
116-
layerCanvas.height = c.canvas.height
119+
const layerCanvas = createCanvas(c.canvas.width, c.canvas.height)
117120
const layerC = layerCanvas.getContext('2d') as CanvasRenderingContext2D
118121
layerC.setTransform(c.getTransform())
119122
layerC.globalAlpha = STROKE_OPACITY

‎sketches/023/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,14 @@ export enum Seeds {
3131
Bristle,
3232
}
3333

34-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
34+
export const design = ({
35+
c,
36+
createCanvas,
37+
simplex,
38+
width,
39+
height,
40+
noiseStart,
41+
}: Design) => {
3542
const layerHues = arrayValuesFromSimplex(
3643
HUES,
3744
simplex[Seeds.Color],
@@ -91,9 +98,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
9198

9299
c.save()
93100

94-
const tempCanvas = document.createElement('canvas')
95-
tempCanvas.width = c.canvas.width
96-
tempCanvas.height = c.canvas.height
101+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
97102
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
98103
tempC.setTransform(c.getTransform())
99104
tempC.globalAlpha = STROKE_OPACITY

‎sketches/024/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,14 @@ export enum Seeds {
3333
Bristle,
3434
}
3535

36-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
36+
export const design = ({
37+
c,
38+
createCanvas,
39+
simplex,
40+
width,
41+
height,
42+
noiseStart,
43+
}: Design) => {
3744
const layerHues = arrayValuesFromSimplex(
3845
HUES,
3946
simplex[Seeds.Color],
@@ -95,9 +102,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
95102

96103
c.save()
97104

98-
const tempCanvas = document.createElement('canvas')
99-
tempCanvas.width = c.canvas.width
100-
tempCanvas.height = c.canvas.height
105+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
101106
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
102107
tempC.setTransform(c.getTransform())
103108
tempC.globalAlpha = STROKE_OPACITY

‎sketches/025/design/index.ts

+9-4
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,14 @@ export enum Seeds {
3232
Bristle,
3333
}
3434

35-
export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
35+
export const design = ({
36+
c,
37+
createCanvas,
38+
simplex,
39+
width,
40+
height,
41+
noiseStart,
42+
}: Design) => {
3643
const layers = Array.from(Array(LAYER_COUNT)).map((_, i) => {
3744
const hue = map(
3845
randomFromNoise(simplex[Seeds.Color].noise2D(10 + i * 23.1, 14.3)),
@@ -93,9 +100,7 @@ export const design = ({ c, simplex, width, height, noiseStart }: Design) => {
93100

94101
c.save()
95102

96-
const tempCanvas = document.createElement('canvas')
97-
tempCanvas.width = c.canvas.width
98-
tempCanvas.height = c.canvas.height
103+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
99104
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
100105
tempC.setTransform(c.getTransform())
101106
tempC.globalAlpha = STROKE_OPACITY

‎sketches/027/design/index.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -129,6 +129,7 @@ const drawShape = (args: Shape) => {
129129

130130
export const design = ({
131131
c,
132+
createCanvas,
132133
simplex,
133134
width,
134135
height,
@@ -210,9 +211,7 @@ export const design = ({
210211
c.globalCompositeOperation = 'screen'
211212
c.globalAlpha = LINE_OPACITY
212213

213-
const tempCanvas = document.createElement('canvas')
214-
tempCanvas.width = c.canvas.width
215-
tempCanvas.height = c.canvas.height
214+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
216215
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
217216
tempC.setTransform(c.getTransform())
218217

‎sketches/028/design/index.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,7 @@ const drawShape = (args: Shape) => {
127127

128128
export const design = ({
129129
c,
130+
createCanvas,
130131
simplex,
131132
width,
132133
height,
@@ -230,9 +231,7 @@ export const design = ({
230231
c.globalCompositeOperation = 'multiply'
231232
c.globalAlpha = LINE_OPACITY
232233

233-
const tempCanvas = document.createElement('canvas')
234-
tempCanvas.width = c.canvas.width
235-
tempCanvas.height = c.canvas.height
234+
const tempCanvas = createCanvas(c.canvas.width, c.canvas.height)
236235
const tempC = tempCanvas.getContext('2d') as CanvasRenderingContext2D
237236
tempC.setTransform(c.getTransform())
238237

‎src/lib/draw.ts

+8
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,13 @@ interface DrawArgs {
88
state: State
99
}
1010

11+
const createCanvas = (width: number, height: number) => {
12+
const canvas = document.createElement('canvas')
13+
canvas.width = width
14+
canvas.height = height
15+
return canvas
16+
}
17+
1118
export const drawBackground = ({ canvas, c, state }: DrawArgs) => {
1219
if (!state.sketch) return
1320

@@ -30,6 +37,7 @@ export const drawDesign = ({ c, state }: Pick<DrawArgs, 'c' | 'state'>) => {
3037

3138
state.sketch.design({
3239
c,
40+
createCanvas,
3341
simplex,
3442
seed: state.designNoiseSeeds,
3543
noiseStart: state.noiseStart,

‎src/pages/api/preview/[sketch].ts

+1
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@ const handler = async (req: Req, res: Res) => {
5151

5252
design({
5353
c: designC,
54+
createCanvas,
5455
seed: designSeeds,
5556
simplex: designSeeds.map(seed => new SimplexNoise(seed)),
5657
noiseStart: 0,

‎src/types.ts

+1
Original file line numberDiff line numberDiff line change
@@ -99,6 +99,7 @@ export interface Cut {
9999

100100
export interface Design {
101101
c: CanvasRenderingContext2D
102+
createCanvas: (width: number, height: number) => HTMLCanvasElement | OffscreenCanvas
102103
simplex: SimplexNoise[]
103104
seed: string[]
104105
width: number

0 commit comments

Comments
 (0)