feat(settings/options/rendering-mode): implement

app/utils/canvas.ts

@@ -13,6 +13,23 @@ export const fillTextCentered = (
   return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
 };
 
+export const fillImageTextHCentered = (
+  ctx: CanvasRenderingContext2D,
+  image: AtlasImage,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  gap: number,
+) => {
+  const { actualBoundingBoxRight: textWidth } = ctx.measureText(text);
+  const totalWidth = textWidth + gap + image.rect.width;
+  const groupX = Math.floor(x + width / 2 - totalWidth / 2);
+
+  image.draw(ctx, groupX, y);
+  ctx.fillText(text, groupX + gap + image.rect.width, y);
+};
+
 export const fillTextHCentered = (
   ctx: CanvasRenderingContext2D,
   text: string,
@@ -25,6 +42,20 @@ export const fillTextHCentered = (
   ctx.fillText(text, textX, y);
 };
 
+export const fillTextHCenteredMultiline = (
+  ctx: CanvasRenderingContext2D,
+  text: string,
+  x: number,
+  y: number,
+  width: number,
+  lineHeight: number,
+) => {
+  const lines = text.split("\n");
+  for (let i = 0, y = 20; i < lines.length; i += 1, y += lineHeight) {
+    fillTextHCentered(ctx, lines[i]!, 0, y, width);
+  }
+};
+
 export const fillTextWordWrapped = (
   ctx: CanvasRenderingContext2D,
   text: string,