| @@ -32,12 +32,14 @@ | ||
| 32 | 32 | ctx.arcTo(x, y, x + width, y, radius); |
| 33 | 33 | ctx.closePath(); |
| 34 | 34 | }; |
| 35 | 35 | |
| 36 | +const pillLineWidth = (fontSize) => Math.max(1, fontSize / 12); | |
| 37 | + | |
| 36 | 38 | const drawPill = (ctx, x, y, fontSize) => { |
| 37 | 39 | const label = aiLabelText(); |
| 38 | 40 | const { width, height } = pillSize(ctx, fontSize, label); |
| 39 | - const lineWidth = Math.max(1, fontSize / 12); | |
| 41 | + const lineWidth = pillLineWidth(fontSize); | |
| 40 | 42 | pillPath(ctx, x, y, width, height); |
| 41 | 43 | ctx.fillStyle = '#1a1a1a'; |
| 42 | 44 | ctx.fill(); |
| 43 | 45 | // A centered stroke would eat half the border out of the fill box. |
| @@ -65,17 +67,18 @@ | ||
| 65 | 67 | ctx.textBaseline = 'alphabetic'; |
| 66 | 68 | ctx.fillText(label, x + width / 2, y + height / 2 + (ascent - descent) / 2); |
| 67 | 69 | }; |
| 68 | 70 | |
| 71 | +// Beyond 87.5% our narrowest crop, a 3:4 cover, eats the label. | |
| 72 | +const PILL_RIGHT_EDGE = 0.85; | |
| 73 | + | |
| 69 | 74 | export const stampAiLabel = (ctx, width, height) => { |
| 70 | 75 | const fontSize = Math.max(12, Math.round(Math.min(width, height) * 0.02)); |
| 71 | 76 | const pill = pillSize(ctx, fontSize, aiLabelText()); |
| 72 | - // The 16px is to the border's outer edge, which sits past the fill. | |
| 73 | - const inset = 16 + Math.max(1, fontSize / 12); | |
| 74 | 77 | drawPill( |
| 75 | 78 | ctx, |
| 76 | - width - pill.width - inset, | |
| 77 | - height - pill.height - inset, | |
| 79 | + width * PILL_RIGHT_EDGE - pill.width - pillLineWidth(fontSize), | |
| 80 | + (height - pill.height) / 2, | |
| 78 | 81 | fontSize, |
| 79 | 82 | ); |
| 80 | 83 | }; |
| 81 | 84 | |