1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// creates a 4x4 pattern
export default function createPatternDataURL() {
const patternSize = 4;
const ctx = document.createElement('canvas').getContext('2d')!;
ctx.canvas.width = patternSize;
ctx.canvas.height = patternSize;
const b = [0, 0, 0, 255];
const t = [0, 0, 0, 0];
const r = [255, 0, 0, 255];
const g = [0, 255, 0, 255];
const imageData = new ImageData(patternSize, patternSize);
// prettier-ignore
imageData.data.set([
b, t, t, r,
t, b, g, t,
t, r, b, t,
g, t, t, b,
].flat());
ctx.putImageData(imageData, 0, 0);
return { patternSize, imageData, dataURL: ctx.canvas.toDataURL() };
}
|
