API References

Call viewer.compare.compare({ backgroundUrl, overlayUrl }) when both source files are already positioned correctly and you want Canvas to generate a visual diff. In SDK 2.2.2, it returns Promise<ComparisonResult> and resolves after the payload-bearing comparisonComplete and following progressEnd events.

const result = await viewer.compare.compare({
  backgroundUrl: "https://files.example.com/bg.pdf",
  overlayUrl: "https://files.example.com/overlay.pdf",
  dpi: 200,
  backgroundColor: "#E86767",
  overlayColor: "#0E3BD8",
  equalColor: "rgb(128,128,128)"
});

console.log(result.outputFileUrl);

Call viewer.compare.align({ backgroundUrl, overlayUrl, alignArray }) when the source files require interactive point matching, or when the host already has alignArray point objects.

viewer.compare.align({
  backgroundUrl: "https://files.example.com/bg.pdf",
  overlayUrl: "https://files.example.com/overlay.pdf",
  dpi: 200,
  backgroundColor: "#E86767",
  overlayColor: "#0E3BD8"
});

Both compare and align report through the same completion and error event listeners on viewer.compare. Compare additionally returns a promise; align remains event-driven.

• comparisonComplete: Fires when the compare or align workflow finishes successfully (or reaches the interactive align stage).
• comparisonError: Fires when the compare or align workflow fails.

viewer.compare.on("comparisonComplete", (result) => {
  if (result) {
    console.log("Completed with file:", result.relativePath);
  } else {
    console.log("Ready for interactive alignment.");
  }
});

viewer.compare.on("comparisonError", (error) => {
  console.error("Comparison error:", error.message);
});