diff --git a/src/canvas/model/Canvas.ts b/src/canvas/model/Canvas.ts
index 032903b1d..d800130bb 100644
--- a/src/canvas/model/Canvas.ts
+++ b/src/canvas/model/Canvas.ts
@@ -30,6 +30,7 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     super(module, { scripts, styles });
     this.set('frames', new Frames(module));
     this.on('change:zoom', this.onZoomChange);
+    this.on('change:x change:y', this.onCoordsChange);
     this.listenTo(em, `change:device ${evDeviceUpdate}`, this.updateDevice);
     this.listenTo(em, evPageSelect, this._pageUpdated);
   }
@@ -72,6 +73,11 @@ export default class Canvas extends ModuleModel<CanvasModule> {
     em.trigger(module.events.zoom);
   }
 
+  onCoordsChange() {
+    const { em, module } = this;
+    em.trigger(module.events.coords);
+  }
+
   getPointerCoords(type: CoordinatesTypes = CoordinatesTypes.World): Coordinates {
     const { pointer, pointerScreen } = this.attributes;
     return type === CoordinatesTypes.World ? pointer : pointerScreen;
diff --git a/src/canvas/types.ts b/src/canvas/types.ts
index 1d435a89c..4fdd01e3d 100644
--- a/src/canvas/types.ts
+++ b/src/canvas/types.ts
@@ -90,6 +90,15 @@ export enum CanvasEvents {
    */
   viewportEnd = 'canvas:viewport:end',
 
+  /**
+   * @event `canvas:coords` Canvas coordinates updated.
+   * @example
+   * editor.on('canvas:coords', () => {
+   *  console.log('Canvas coordinates updated:', editor.Canvas.getCoords());
+   * });
+   */
+  coords = 'canvas:coords',
+
   /**
    * @event `canvas:zoom` Canvas zoom updated.
    * @example