feat(projects): render preview in top screen, also prepare for markdown rendering

app/utils/canvas.ts

@@ -0,0 +1,57 @@
+export const fillTextCentered = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+): number => {
+  const measure = ctx.measureText(text);
+  const textX = Math.floor(x + width / 2 - measure.actualBoundingBoxRight / 2);
+  const textY =
+    measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
+  ctx.fillText(text, textX, y + textY);
+  return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
+};
+
+export const fillTextWordWrapped = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  lineHeight?: number,
+): number => {
+  const words = text.split(" ");
+  let line = "";
+  let currentY = y;
+  let lineCount = 0;
+
+  const height =
+    lineHeight ||
+    ctx.measureText("M").actualBoundingBoxAscent +
+      ctx.measureText("M").actualBoundingBoxDescent;
+
+  currentY += height;
+
+  for (let i = 0; i < words.length; i++) {
+    const testLine = line + (line ? " " : "") + words[i];
+    const metrics = ctx.measureText(testLine);
+    const testWidth = metrics.width;
+
+    if (testWidth > width && line) {
+      ctx.fillText(line, x, currentY);
+      line = words[i]!;
+      currentY += height;
+      lineCount++;
+    } else {
+      line = testLine;
+    }
+  }
+
+  if (line) {
+    ctx.fillText(line, x, currentY);
+    lineCount++;
+  }
+
+  return lineCount * height;
+};