Using the composition coordinates to render the subtitle on the canvas instead of the window position. This matches the FFmpeg implementation.

src/pgs.ts

@@ -188,7 +188,8 @@ export class Pgs {
             // Builds the subtitle.
             const pixelData = this.getPixelDataFromComposition(compositionObject, palette, ctxObjects);
             if (pixelData) {
-                compositionData.push(new SubtitleCompositionData(window, pixelData));
+                compositionData.push(new SubtitleCompositionData(
+                  compositionObject.horizontalPosition, compositionObject.verticalPosition, window, pixelData));
             }
         }
 

src/renderer.ts

@@ -63,7 +63,7 @@ export class Renderer {
      * @param dirtyArea If given, it will extend the dirty rect to include the affected subtitle area.
      */
     private drawSubtitleCompositionData(compositionData: SubtitleCompositionData, dirtyArea?: Rect): void {
-        this.context?.putImageData(compositionData.pixelData, compositionData.window.horizontalPosition, compositionData.window.verticalPosition);
+        this.context?.putImageData(compositionData.pixelData, compositionData.x, compositionData.y);
 
         // Mark this area as dirty.
         dirtyArea?.union(compositionData.window.horizontalPosition, compositionData.window.verticalPosition,

src/subtitleData.ts

@@ -30,6 +30,16 @@ export class SubtitleData {
  * This class contains the compiled subtitle data for a single composition.
  */
 export class SubtitleCompositionData {
+    /**
+     * The x position of the image in pixels from the left edge of the canvas.
+     */
+    public readonly x: number;
+
+    /**
+     * The y position of the image in pixels from the top edge of the canvas.
+     */
+    public readonly y: number;
+
     /**
      * The pgs window to draw on (the on-screen position).
      */
@@ -40,7 +50,9 @@ export class SubtitleCompositionData {
      */
     public readonly pixelData: ImageData;
 
-    public constructor(window: WindowDefinition, pixelData: ImageData) {
+    public constructor(x: number, y: number, window: WindowDefinition, pixelData: ImageData) {
+        this.x = x;
+        this.y = y;
         this.window = window;
         this.pixelData = pixelData;
     }