diff --git a/packages/client/src/components/Settings/TemplateSettings.tsx b/packages/client/src/components/Settings/TemplateSettings.tsx
index 539a334b940c93850a11d9dc9056c5eeea90c18d..8ac9158fe2f59b56fcbc09005b79253360d25bc5 100644
--- a/packages/client/src/components/Settings/TemplateSettings.tsx
+++ b/packages/client/src/components/Settings/TemplateSettings.tsx
@@ -6,6 +6,7 @@ import { toast } from "react-toastify";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLink } from "@fortawesome/free-solid-svg-icons";
 import { WebGLUtils } from "@/lib/webgl";
+import { CanvasCore } from "@/lib/canvas";
 
 export const TemplateSettings = () => {
   const {
@@ -42,6 +43,16 @@ export const TemplateSettings = () => {
             isSelected={enable || false}
             onValueChange={(bool: boolean) => {
               setEnable(bool);
+
+              if (bool && x === undefined && y === undefined) {
+                const canvas = CanvasCore.get(false);
+                if (canvas) {
+                  const { canvasX, canvasY } =
+                    canvas.panZoomTransformToCanvas();
+                  setX(canvasX);
+                  setY(canvasY);
+                }
+              }
             }}
           />
           <h2 className="text-xl">Template</h2>
@@ -121,7 +132,7 @@ export const TemplateSettings = () => {
           >
             Show Mobile Tools
           </Switch>
-          {url && (
+          {url && x !== undefined && y !== undefined && (
             <Button
               onPress={() => {
                 const copied = `${window.location.origin}${window.location.pathname}#tu=${url}${
diff --git a/packages/client/src/components/Templating/Template.tsx b/packages/client/src/components/Templating/Template.tsx
index 7350f3ecb0925b926cd85650ab51e34d00f71d4d..d88531a0394a4b3f04850395cfb233f2f9930ebc 100644
--- a/packages/client/src/components/Templating/Template.tsx
+++ b/packages/client/src/components/Templating/Template.tsx
@@ -58,6 +58,8 @@ const $Template = () => {
     };
 
     const handleMouseUp = (_e: MouseEvent) => {
+      if (!startLocation) return;
+
       startLocation = undefined;
       CanvasCore.get().getPanZoom()!.panning.setEnabled(true);
 
diff --git a/packages/client/src/contexts/TemplateContext.tsx b/packages/client/src/contexts/TemplateContext.tsx
index d853fde839eba5dadcd86f8955b0b8990de04d8b..b54a3f032bd67d17c2e733ac422ae322d6da46a1 100644
--- a/packages/client/src/contexts/TemplateContext.tsx
+++ b/packages/client/src/contexts/TemplateContext.tsx
@@ -29,8 +29,8 @@ interface ITemplate {
    */
   width?: number;
 
-  x: number;
-  y: number;
+  x: number | undefined;
+  y: number | undefined;
   opacity: number;
   style: TemplateStyle;
 
@@ -57,8 +57,8 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
   const [width, setWidth] = useState<number | undefined>(
     routerData.template?.width,
   );
-  const [x, setX] = useState(routerData.template?.x || 0);
-  const [y, setY] = useState(routerData.template?.y || 0);
+  const [x, setX] = useState(routerData.template?.x);
+  const [y, setY] = useState(routerData.template?.y);
   const [opacity, setOpacity] = useState(100);
   const [style, setStyle] = useState<TemplateStyle>(
     routerData.template?.style || "ONE_TO_ONE",
@@ -75,8 +75,8 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
         setEnable(true);
         setURL(data.template.url);
         setWidth(data.template.width);
-        setX(data.template.x || 0);
-        setY(data.template.y || 0);
+        setX(data.template.x);
+        setY(data.template.y);
         setStyle(data.template.style || "ONE_TO_ONE");
       } else {
         setEnable(false);
@@ -97,6 +97,13 @@ export const TemplateContext = ({ children }: PropsWithChildren) => {
   }, []);
 
   useEffect(() => {
+    if (x === undefined || y === undefined) {
+      console.warn(
+        "TemplateContext updating router ignored, x or y is undefined",
+      );
+      return;
+    }
+
     Router.setTemplate({ enabled: enable, width, x, y, url, style });
 
     if (!initAt.current) {
diff --git a/packages/client/src/lib/canvas.ts b/packages/client/src/lib/canvas.ts
index cc8d148dcab05fe758a35dbc534b1bc58612a002..e5f6a05b63f6fc3f0fe7380d487926bda136d7c2 100644
--- a/packages/client/src/lib/canvas.ts
+++ b/packages/client/src/lib/canvas.ts
@@ -44,9 +44,15 @@ export class CanvasCore extends EventEmitter<CanvasEvents> {
   private bypassCooldown = false;
   // private _delayedLoad: ReturnType<typeof setTimeout>;
 
-  static get() {
+  static get(): CanvasCore;
+  static get<T extends boolean>(
+    instanceIfNeeded: T,
+  ): T extends true ? CanvasCore : CanvasCore | null;
+  static get(instanceIfNeeded = true) {
     if (this.instance) return this.instance;
 
+    if (!instanceIfNeeded) return null;
+
     return (this.instance = new this());
   }
 
diff --git a/packages/client/src/lib/router.ts b/packages/client/src/lib/router.ts
index 4ddb482c4426f41d09ee3a1f3ff0bba5cd52dd2e..4cb6fd99d1438240c960b42d77ed37f2be915dae 100644
--- a/packages/client/src/lib/router.ts
+++ b/packages/client/src/lib/router.ts
@@ -41,14 +41,14 @@ class _Router extends EventEmitter<RouterEvents> {
   templateState: {
     enabled: boolean;
     width?: number;
-    x: number;
-    y: number;
+    x: number | undefined;
+    y: number | undefined;
     url?: string;
     style: TemplateStyle;
   } = {
     enabled: false,
-    x: 0,
-    y: 0,
+    x: undefined,
+    y: undefined,
     style: "ONE_TO_ONE",
   };
 
@@ -218,8 +218,8 @@ class _Router extends EventEmitter<RouterEvents> {
   setTemplate(args: {
     enabled: boolean;
     width?: number;
-    x: number;
-    y: number;
+    x: number | undefined;
+    y: number | undefined;
     url?: string;
     style: TemplateStyle;
   }) {
diff --git a/packages/client/src/lib/template.ts b/packages/client/src/lib/template.ts
index b86ef0421f25583c4a450de3e1b7ec35ece4ba80..722cabc5139754bfc89dc670657071a446f3c042 100644
--- a/packages/client/src/lib/template.ts
+++ b/packages/client/src/lib/template.ts
@@ -122,7 +122,11 @@ export class Template extends EventEmitter<TemplateEvents> {
 
     switch (key) {
       case "enable":
-        this.setElementVisible([this.$canvas, this.$imageLoader], !!value);
+        this.setElementVisible([this.$canvas], !!value);
+        this.setElementVisible(
+          [this.$imageLoader],
+          !!value && this.options.style === "SOURCE",
+        );
         break;
       case "style":
         if ((value as keyof typeof TemplateStyle) in TemplateStyle) {