Refactor text rendering and adjust viewport defaults

Introduced a drawTextWithBackground helper to centralize and simplify text rendering with backgrounds in CanvasRenderer (JS/TS). Updated all relevant usages to use this helper. Adjusted initial viewport x/y offsets in Canvas and Canvas.ts for improved default positioning.

js/Canvas.js

@@ -50,8 +50,8 @@ export class Canvas {
         this.onHistoryChange = callbacks.onHistoryChange;
         this.lastMousePosition = { x: 0, y: 0 };
         this.viewport = {
-            x: -(this.width / 4),
-            y: -(this.height / 4),
+            x: -(this.width / 1.5),
+            y: -(this.height / 2),
             zoom: 0.8,
         };
         const { canvas: offscreenCanvas, ctx: offscreenCtx } = createCanvas(0, 0, '2d', {