fix: remove extra padding around images

src/drawers.ts

@@ -100,7 +100,7 @@ export const drawText = (
 
   context.textAlign = 'center';
   context.textBaseline = 'middle';
-  context.font = 'bold 14px "DroidSans"';
+  context.font = '300 16px "OpenSans"';
   context.fillStyle = textColor(tier);
   context.fillText(name, x, 280);
 
@@ -161,7 +161,7 @@ export const drawBackground = async (mod: Mod, width: number, height: number, ra
   }
 
   const polarity = await drawPolarity(tier, mod.polarity);
-  context.drawImage(await loadImage(polarity), 230, 100, 18, 18);
+  context.drawImage(await loadImage(polarity), 230, 101, 16, 16);
 
   return canvas.encode('png');
 };

src/generator.ts

@@ -25,7 +25,13 @@ export const generateBasicMod = async (mod: Mod, rank: number): Promise<Buffer>
   }
   context.drawImage(await loadImage(frame), 0, 0);
 
-  return canvas.encode('png');
+  const outterCanvas = createCanvas(width, 370);
+  const outterContext = outterCanvas.getContext('2d');
+
+  const image = await canvas.encode('png');
+  outterContext.drawImage(await loadImage(image), 0, -80);
+
+  return outterCanvas.encode('png');
 };
 
 export const generateRivenMod = async (riven: RivenMod): Promise<Buffer> => {

tests/generator.spec.ts

@@ -26,7 +26,7 @@ describe('Generate a mod', () => {
       const mod = find.findItem(mods[i]) as Mod;
       if (!mod) continue;
       const isRiven = mod.name?.includes('Riven');
-      const modCanvas = isRiven ? await generateRivenMod(mod as RivenMod) : await generateBasicMod(mod, 3);
+      const modCanvas = isRiven ? await generateRivenMod(mod as RivenMod) : await generateBasicMod(mod, 0);
       if (!modCanvas) assert.equal(true, false, 'Failed to generate mod');
 
       writeFileSync(join('.', 'assets', 'tests', `${mod.name}.png`), modCanvas);