joshmarinacci / node-pureimage

Pure JS implementation of the HTML Canvas 2D drawing API
MIT License
780 stars 89 forks source link

fillText is drawn in only one font out of many. #201

Open tinywolf3 opened 2 months ago

tinywolf3 commented 2 months ago

Expected Behaviour

  1. I want to output text in multiple fonts on a single image.

Actual Behaviour

  1. I run registerFont multiple times, but it only outputs the first registered font.

Steps To Reproduce

  1. You can test this with the code below.

Any Relevant Code Snippets

import { createWriteStream } from 'node:fs';
import { exec } from 'node:child_process';
import * as PImage from 'pureimage';

const fonts: PImage.Font[] = [];

async function test() {
    const font_list = [
        { name: 'newbie', file: './fonts/SuperNormal.ttf' },
        { name: 'easy', file: './fonts/SupplyCenter.ttf' },
        { name: 'normal', file: './fonts/Dobidoo.ttf' },
        { name: 'hard', file: './fonts/Youchat.ttf' },
        { name: 'master', file: './fonts/Lazydog.ttf' },
    ];
    for (const f of font_list) {
        const font = PImage.registerFont(f.file, f.name);
        await font.load();
        fonts.push(font);
    }

    const img = PImage.make(200, 200);
    const ctx = img.getContext('2d');
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, 200, 200);

    ctx.fillStyle = '#cccc00';
    ctx.font = "24pt 'newbie'";
    ctx.textAlign = 'center';
    ctx.fillText('newbie', 100, 40);

    ctx.fillStyle = '#00ff00';
    ctx.font = "24pt 'easy'";
    ctx.textAlign = 'center';
    ctx.fillText('easy', 100, 70);

    ctx.fillStyle = '#000000';
    ctx.font = "24pt 'normal'";
    ctx.textAlign = 'center';
    ctx.fillText('normal', 100, 100);

    ctx.fillStyle = '#ff0000';
    ctx.font = "24pt 'hard'";
    ctx.textAlign = 'center';
    ctx.fillText('hard', 100, 130);

    ctx.fillStyle = '#cc00cc';
    ctx.font = "24pt 'master'";
    ctx.textAlign = 'center';
    ctx.fillText('master', 100, 160);

    await PImage.encodePNGToStream(img, createWriteStream('./test.png'))
        .catch((e) => {
            console.error('there was an error image writing');
        });
    exec('open ./test.png');
}

test();

Platform

OS: macOS Sonoma 14.5 Node Version: v20.12.1 NPM Version: 10.8.1 PureImage Version: 0.4.13

Any Additional Info

result test expect test

unclexiao commented 2 months ago

I get the same problem, can I unregister my font?

joshmarinacci commented 3 weeks ago

My apologies for not addressing this yet. It's been a crazy summer with travel and moving two houses. I should be able to get to the bugs after labor day.