source for lucas.co
border.js (6.4K)
1 const canvas = document.createElement("canvas");
2 const ctx = canvas.getContext("2d");
3 const dpr = window.devicePixelRatio;
4 canvas.id = "canvasBorder";
5 document.body.appendChild(canvas);
6
7 canvas.style.position = "fixed";
8 canvas.style.top = "0";
9 canvas.style.left = "0";
10 canvas.style.zIndex = "999";
11 canvas.style.display = "block";
12 canvas.style.pointerEvents = "none";
13 canvasUpdate();
14
15
16 //
17
18 // console.log("test")
19 // setTimeout(function() {
20 // if (window.innerHeight != lastHeight) {
21 // lastH = window.innerHeight;
22 // console.log("test");
23 // canvasClear();
24 // canvasInit();
25 // }
26 // }, 100);
27 // })
28
29 // let lastH = window.visualViewport ?
30 // window.visualViewport.height :
31 // window.innerHeight;
32 // let lastW = Math.min(document.documentElement.clientWidth, window.innerWidth);
33
34 window.addEventListener("resize", function() {
35 // setTimeout(function() {
36 // const newH = window.visualViewport ?
37 // window.visualViewport.height :
38 // window.innerHeight;
39 // console.log(lastH);
40 // console.log(newH);
41 // if (newH != lastH) {
42 // lastH = newH;
43 canvasUpdate();
44 // }, 100)
45 })
46
47
48 //
49
50
51 function canvasUpdate() {
52 ctx.clearRect(0, 0, canvas.width, canvas.height);
53
54 const viewportH = window.visualViewport ?
55 window.visualViewport.height :
56 window.innerHeight;
57 const viewportW = Math.min(document.documentElement.clientWidth, window.innerWidth);
58
59 canvas.style.height = viewportH;
60 canvas.style.width = viewportW;
61
62 canvas.height = Math.floor(viewportH * 1);
63 canvas.width = Math.floor(viewportW * 1);
64
65 makeBorderGrad();
66 makeBorderStroke();
67 // reportWindowInformation();
68 }
69
70 function convertEmToPx(em) {
71 const fontSize = parseFloat( window.getComputedStyle(document.body).fontSize );
72 return em * fontSize;
73 }
74
75 function convertPxToEm(px) {
76 const fontSize = parseFloat( window.getComputedStyle(document.body).fontSize );
77 return px / fontSize;
78 }
79
80 function makeBorderGrad() {
81 // init
82 const w = canvas.width;
83 const h = canvas.height;
84 const borderW = 50;
85
86 // top
87 let grad = ctx.createLinearGradient(0, 0, 0, borderW);
88 grad.addColorStop(0, "rgba(0, 0, 0, 1)");
89 grad.addColorStop(1, "rgba(0, 0, 0, 0)");
90 ctx.fillStyle = grad
91 ctx.fillRect(0, 0, w, borderW);
92
93 // bottom
94 grad = ctx.createLinearGradient(0, h - borderW, 0, h);
95 grad.addColorStop(0, "rgba(0, 0, 0, 0)");
96 grad.addColorStop(1, "rgba(0, 0, 0, 1)");
97 ctx.fillStyle = grad;
98 ctx.fillRect(0, h - borderW, w, borderW);
99
100 // left
101 grad = ctx.createLinearGradient(0, 0, borderW, 0);
102 grad.addColorStop(0, "rgba(0, 0, 0, 1)");
103 grad.addColorStop(1, "rgba(0, 0, 0, 0)");
104 ctx.fillStyle = grad;
105 ctx.fillRect(0, 0, borderW, h);
106
107 // right
108 grad = ctx.createLinearGradient(w - borderW, 0, w, 0);
109 grad.addColorStop(0, "rgba(0, 0, 0, 0)");
110 grad.addColorStop(1, "rgba(0, 0, 0, 1)");
111 ctx.fillStyle = grad;
112 ctx.fillRect(w - borderW, 0, borderW, h);
113 }
114
115 function makeBorderStroke() {
116
117 // init
118 ctx.strokeStyle = "white";
119 ctx.lineWidth = convertEmToPx(0.05);
120
121 // parameters
122 const margin = convertEmToPx(1);
123 const inset = convertEmToPx(5);
124
125 const borderW = (canvas.width - (margin * 2) - inset);
126 const borderH = (canvas.height - (margin * 2) - inset);
127
128 const strokeCtX = Math.floor(borderW / 40);
129 const strokeCtY = Math.floor(borderH / 40);
130 const strokeLenX = borderW / ((strokeCtX + 1) / 2);
131 const strokeLenY = borderH / ((strokeCtY + 1) / 2);
132 const strokeW = convertEmToPx(0.5);
133
134 // test
135
136 // const grad = ctx.createLinearGradient(60, 10, 20, 10);
137 // grad.addColorStop(0, "white");
138 // grad.addColorStop(1, "black");
139 // ctx.strokeStyle = grad;
140 // ctx.lineWidth = 5;
141 // ctx.beginPath();
142 // ctx.moveTo(300, 300);
143 // ctx.lineTo(400, 800);
144 // ctx.stroke();
145 // return;
146
147 // draw top
148 let x = margin + inset / 2;
149 let y = margin;
150 ctx.beginPath();
151 for (let i = 0; i < strokeCtX; i++) {
152
153 ctx.moveTo(x, y);
154 x += strokeLenX * 0.4
155
156 ctx.lineTo(x, y);
157 x += strokeLenX * 0.2;
158 y += strokeW;
159
160 ctx.lineTo(x, y);
161 x += strokeLenX * 0.4;
162
163 ctx.lineTo(x, y);
164
165 x -= strokeLenX * 0.5;
166 y -= strokeW;
167 }
168 ctx.stroke();
169
170 // draw bottom
171 x = canvas.width - margin - inset / 2;
172 y = canvas.height - margin;
173 ctx.beginPath();
174 for (let i = 0; i < strokeCtX; i++) {
175
176 ctx.moveTo(x, y);
177 x -= strokeLenX * 0.4;
178
179 ctx.lineTo(x, y);
180 x -= strokeLenX * 0.2;
181 y -= strokeW;
182
183 ctx.lineTo(x, y);
184 x -= strokeLenX * 0.4;
185
186 ctx.lineTo(x, y);
187
188 x += strokeLenX * 0.5;
189 y += strokeW;
190 }
191 ctx.stroke();
192
193 // draw left
194 x = margin;
195 y = canvas.height - margin - inset / 2;
196 ctx.beginPath();
197 for (let i = 0; i < strokeCtY; i++) {
198
199 ctx.moveTo(x, y);
200 y -= strokeLenY * 0.4;
201
202 ctx.lineTo(x, y);
203 x += strokeW;
204 y -= strokeLenY * 0.2;
205
206 ctx.lineTo(x, y);
207 y -= strokeLenY * 0.4;
208
209 ctx.lineTo(x, y);
210
211 x -= strokeW;
212 y += strokeLenY * 0.5;
213 }
214 ctx.stroke()
215
216 // draw right
217 x = canvas.width - margin;
218 y = margin + inset / 2;
219 ctx.beginPath();
220 for (let i = 0; i < strokeCtY; i++) {
221
222 ctx.moveTo(x, y);
223 y += strokeLenY * 0.4;
224
225 ctx.lineTo(x, y);
226 x -= strokeW;
227 y += strokeLenY * 0.2;
228
229 ctx.lineTo(x, y);
230 y += strokeLenY * 0.4;
231
232 ctx.lineTo(x, y);
233
234 x += strokeW;
235 y -= strokeLenY * 0.5;
236 }
237 ctx.stroke();
238
239 }
240
241 function reportWindowInformation() {
242 console.log("window.innerHeight", window.innerHeight);
243 console.log("window.innerWidth", window.innerWidth);
244 console.log("document.documentElement.clientHeight", document.documentElement.clientHeight);
245 console.log("document.documentElement.clientWidth", document.documentElement.clientWidth);
246 console.log("window.devicePixelRatio", window.devicePixelRatio);
247 console.log("em size", convertEmToPx(1));
248
249 console.log("canvas.height", canvas.height);
250 console.log("canvas.width", canvas.width);
251 // console.log("canvas.offsetHeight", canvas.offsetHeight);
252 // console.log("canvas.offsetWidth", canvas.offsetWidth);
253 }
254