Fix fog of war (#4031)

This PR fixes the fog of war example.

### Change Type


<!-- ❗ Please select a 'Type' label ❗️ -->

- [ ] `feature` — New feature
- [ ] `improvement` — Product improvement
- [ ] `api` — API change
- [x] `bugfix` — Bug fix
- [ ] `other` — Changes that don't affect SDK users, e.g. internal or
.com changes

---------

Co-authored-by: huppy-bot[bot] <128400622+huppy-bot[bot]@users.noreply.github.com>

apps/docs/app/api/search/route.ts

@@ -44,7 +44,6 @@ export async function GET(req: NextRequest) {
 			[query, query]
 		)
 
-
 		await searchForArticle.all().then(async (queryResults) => {
 			for (const article of queryResults) {
 				const section = await db.getSection(article.sectionId)

apps/examples/src/examples/fog-of-war/FogOfWarExample.tsx

@@ -38,20 +38,23 @@ export function Fog() {
 			for (const shape of shapes) {
 				const point = editor.getShapePageBounds(shape)!.point
 				const geometry = editor.getShapeGeometry(shape)
+				const adjustedPoint = Vec.Sub(point, geometry.bounds.point)
 				for (let i = 0; i < boxes.length; i++) {
 					for (let j = 0; j < boxes[i].length; j++) {
 						const box = boxes[i][j]
-						box.translate(Vec.Neg(point))
+						box.translate(Vec.Neg(adjustedPoint))
 						if (geometry.bounds.collides(box)) {
 							cells[i][j] = true
 						}
-						box.translate(point)
+						box.translate(adjustedPoint)
 					}
 				}
 			}
 			const cvs = rCanvas.current!
 			const ctx = cvs.getContext('2d')!
 
+			cvs.style.filter = `blur(${editor.getCamera().z * 15}px)`
+
 			ctx.resetTransform()
 			const camera = editor.getCamera()
 
@@ -67,7 +70,6 @@ export function Fog() {
 				for (let j = 0; j < boxes[i].length; j++) {
 					if (!cells[i][j]) continue
 					const box = boxes[i][j]
-					ctx.filter = 'drop-shadow(100px)'
 					ctx.clearRect(box.x, box.y, box.width, box.height)
 				}
 			}
@@ -79,7 +81,6 @@ export function Fog() {
 		<canvas
 			ref={rCanvas}
 			style={{
-				zIndex: 999999,
 				position: 'absolute',
 				top: -100,
 				left: -100,

apps/examples/src/examples/fog-of-war/README.md

@@ -1,7 +1,7 @@
 ---
 title: Fog of war
 component: ./FogOfWarExample.tsx
-category: basic
+category: use-cases
 keywords: [ui, fog, overlay]
 ---
 

packages/tldraw/src/lib/shapes/draw/getPath.ts

@@ -38,7 +38,7 @@ const solidSettings = (strokeWidth: number): StrokeOptions => {
 	return {
 		size: strokeWidth,
 		thinning: 0,
-		streamline: modulate(strokeWidth, [9, 16], [0.68, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,
+		streamline: modulate(strokeWidth, [9, 16], [0.64, 0.74], true), // 0.62 + ((1 + strokeWidth) / 8) * 0.06,
 		smoothing: 0.62,
 		simulatePressure: false,
 		easing: EASINGS.linear,