Fix distance grid overflow for glyphs clipped by the canvas edge

index.js

@@ -36,13 +36,17 @@ export default class TinySDF {
         ctx.textAlign = 'left'; // Necessary so that RTL text doesn't have different alignment
         ctx.fillStyle = 'black';
 
+        // the glyph is rasterized at (buffer, buffer), so the canvas clips it to this
+        const maxGlyphDim = this.maxGlyphDim = size - buffer;
+        const gridDim = maxGlyphDim + 2 * buffer;
+
         // two grids of squared distances: one for the outside of the glyph shape, one for the inside;
         // the signed distance is derived as sqrt(outer) - sqrt(inner)
-        this.gridOuter = new Float64Array(size * size);
-        this.gridInner = new Float64Array(size * size);
-        this.f = new Float64Array(size);
-        this.z = new Float64Array(size + 1);
-        this.v = new Uint16Array(size);
+        this.gridOuter = new Float64Array(gridDim * gridDim);
+        this.gridInner = new Float64Array(gridDim * gridDim);
+        this.f = new Float64Array(gridDim);
+        this.z = new Float64Array(gridDim + 1);
+        this.v = new Uint16Array(gridDim);
     }
 
     _createCanvas(size) {
@@ -71,8 +75,8 @@ export default class TinySDF {
         const glyphLeft = Math.floor(-actualBoundingBoxLeft);
 
         // If the glyph overflows the canvas size, it will be clipped at the bottom/right
-        const glyphWidth = Math.max(0, Math.min(this.size - this.buffer, Math.ceil(actualBoundingBoxRight) - glyphLeft));
-        const glyphHeight = Math.max(0, Math.min(this.size - this.buffer, glyphTop + Math.ceil(actualBoundingBoxDescent)));
+        const glyphWidth = Math.max(0, Math.min(this.maxGlyphDim, Math.ceil(actualBoundingBoxRight) - glyphLeft));
+        const glyphHeight = Math.max(0, Math.min(this.maxGlyphDim, glyphTop + Math.ceil(actualBoundingBoxDescent)));
 
         const width = glyphWidth + 2 * this.buffer;
         const height = glyphHeight + 2 * this.buffer;

test/test.js

@@ -106,6 +106,37 @@ test('does not return negative-width glyphs', () => {
     assert.equal(glyph.width, 6); // zero-width glyph with 3px buffer
 });
 
+test('fits the distance grids and stays symmetric for a canvas-filling square clipped at the edge', () => {
+    const sdf = new MockTinySDF({fontSize: 20, buffer: 2});
+    const {size} = sdf;
+
+    sdf.ctx.measureText = () => ({
+        width: 40,
+        actualBoundingBoxLeft: 0,
+        actualBoundingBoxRight: 40,
+        actualBoundingBoxAscent: 30,
+        actualBoundingBoxDescent: 10
+    });
+    sdf.ctx.fillText = function () {
+        this.fillRect(0, 0, size, size);
+    };
+
+    const {data, width, height} = sdf.draw('X');
+    const longestLine = Math.max(width, height);
+
+    assert.ok(width > size && height > size, 'the padded glyph is bigger than the canvas');
+    assert.ok(width * height <= sdf.gridOuter.length, 'the padded glyph fits the distance grids');
+    assert.ok(longestLine <= sdf.f.length && longestLine <= sdf.v.length && longestLine < sdf.z.length,
+        'the padded glyph fits the 1D transform scratch arrays');
+
+    for (let y = 0; y < height; y++) {
+        const row = data.subarray(y * width, (y + 1) * width);
+        const mirroredRow = data.subarray((height - 1 - y) * width, (height - y) * width);
+        assert.deepEqual(row, mirroredRow, `row ${y} mirrors row ${height - 1 - y}`);
+        assert.deepEqual(row, row.slice().reverse(), `row ${y} is left-right symmetric`);
+    }
+});
+
 test('renders Chinese and Japanese versions of characters', () => {
     // assumes Noto Sans CJK SC font is installed
     const sdf1 = new MockTinySDF({fontFamily: 'Noto Sans CJK SC', lang: 'zh'});