diff --git a/addons/xterm-addon-canvas/src/BaseRenderLayer.ts b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
index 67d459f7..b037d61e 100644
--- a/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
+++ b/addons/xterm-addon-canvas/src/BaseRenderLayer.ts
@@ -357,7 +357,7 @@ export abstract class BaseRenderLayer extends Disposable implements IRenderLayer
    */
   protected _drawChars(cell: ICellData, x: number, y: number): void {
     const chars = cell.getChars();
-    this._cellColorResolver.resolve(cell, x, y);
+    this._cellColorResolver.resolve(cell, x, this._bufferService.buffer.ydisp + y);
     let glyph: IRasterizedGlyph;
     if (chars && chars.length > 1) {
       glyph = this._charAtlas.getRasterizedGlyphCombinedChar(chars, this._cellColorResolver.result.bg, this._cellColorResolver.result.fg, this._cellColorResolver.result.ext);
diff --git a/demo/client.ts b/demo/client.ts
index 18ce1808..5b561a8c 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -992,3 +992,33 @@ function addOverviewRuler(): void {
   term.registerDecoration({ marker: term.registerMarker(10), overviewRulerOptions: { color: '#ffffff80', position: 'full' } });
 }
 
+(console as any).image = (source: ImageData | HTMLCanvasElement, scale: number = 1) => {
+  function getBox(width: number, height: number): any {
+    return {
+      string: '+',
+      style: 'font-size: 1px; padding: ' + Math.floor(height/2) + 'px ' + Math.floor(width/2) + 'px; line-height: ' + height + 'px;'
+    };
+  }
+  if (source instanceof HTMLCanvasElement) {
+    source = source.getContext('2d')?.getImageData(0, 0, source.width, source.height)!;
+  }
+  const canvas = document.createElement('canvas');
+  canvas.width = source.width;
+  canvas.height = source.height;
+  const ctx = canvas.getContext('2d')!;
+  ctx.putImageData(source, 0, 0);
+
+  const sw = source.width * scale;
+  const sh = source.height * scale;
+  const dim = getBox(sw, sh);
+  console.log(
+    `Image: ${source.width} x ${source.height}\n%c${dim.string}`,
+    `${dim.style}background: url(${canvas.toDataURL()}); background-size: ${sw}px ${sh}px; background-repeat: no-repeat; color: transparent;`
+  );
+  console.groupCollapsed('Zoomed');
+  console.log(
+    `%c${dim.string}`,
+    `${getBox(sw * 10, sh * 10).style}background: url(${canvas.toDataURL()}); background-size: ${sw * 10}px ${sh * 10}px; background-repeat: no-repeat; color: transparent; image-rendering: pixelated;-ms-interpolation-mode: nearest-neighbor;`
+  );
+  console.groupEnd();
+};
diff --git a/src/browser/renderer/shared/TextureAtlas.ts b/src/browser/renderer/shared/TextureAtlas.ts
index 23deb8a3..4edebf5c 100644
--- a/src/browser/renderer/shared/TextureAtlas.ts
+++ b/src/browser/renderer/shared/TextureAtlas.ts
@@ -715,7 +715,7 @@ export class TextureAtlas implements ITextureAtlas {
     }
     boundingBox.left = 0;
     found = false;
-    for (let x = 0; x < width; x++) {
+    for (let x = 0; x < padding + width; x++) {
       for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {
@@ -730,7 +730,7 @@ export class TextureAtlas implements ITextureAtlas {
     }
     boundingBox.right = width;
     found = false;
-    for (let x = width - 1; x >= 0; x--) {
+    for (let x = padding + width - 1; x >= padding; x--) {
       for (let y = 0; y < height; y++) {
         const alphaOffset = y * this._tmpCanvas.width * 4 + x * 4 + 3;
         if (imageData.data[alphaOffset] !== 0) {