Предоставление оттенка изображения canvas2d для шрифтов Sprite

Исправлено с помощью режима «осветления» для черных пикселей с заливкой фона, затем применен режим «затемнения» вместо «исходный» и все готово!

var size = 32;
var x = 200;
var y = 200;
var spacing = 0;
for (var i = 0; i < txt.length; i++) {
    var q = fonts[0].info[txt[i]];
    ctx.save();
    ctx.globalCompositeOperation = "lighten";
    ctx.fillStyle = ctx.canvas.style.backgroundColor;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    if (q) ctx.drawImage(fonts[0].src, q.x, q.y, q.w, q.h, x + (spacing || 0) + (i * size), y, size, size);
    ctx.globalCompositeOperation = "darken";
    ctx.fillStyle = "green";
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
    ctx.restore();
}

Это лучший способ, который я нашел:

1. Создайте холст с размерами, соответствующими размерам изображения спрайта.
2. Сохранить состояние контекста в созданном холсте
3. Установите fillStyle созданного контекста холста с цветом текста спрайта (Tint)
4. Установите globalAlpha созданного контекста холста на непрозрачность
5. Залейте созданный фон холста цветом текста спрайта (Tint)
6. Применить композитный режим «назначение поверх» в созданном контексте холста
7. Сбросить globalAlpha созданного контекста холста до 1 (по умолчанию)
8. Нарисуйте изображение спрайта на созданном холсте
9. Восстановить состояние контекста в созданном холсте
10. Затем пусть контекст холста по умолчанию (не созданный) рисует символы из изображения спрайтового шрифта, поэтому мы позволяем ему рисовать часть созданного нами холста (обратите внимание, что изображение спрайтового шрифта заполняет весь созданный холст)
11. Сделанный!

var size = 32;
var x = 200;
var y = 200;
var spacing = 0;
var opacity = 0.8;
var color = "green";
for (var i = 0; i < txt.length; i++) {
    var q = fonts[0].info[txt[i]];
    var c = document.createElement("canvas").getContext("2d");
    c.canvas.width = fonts[0].src.width;
    c.canvas.height = fonts[0].src.height;
    c.save();
    c.fillStyle = color;
    c.globalAlpha = opacity || 0.8;
    c.fillRect(0, 0, c.canvas.width, c.canvas.height);
    c.globalCompositeOperation = "destination-atop";
    c.globalAlpha = 1;
    c.drawImage(fonts[0].src, 0, 0);
    c.restore();
    if (q) ctx.drawImage(c.canvas, q.x, q.y, q.w, q.h, x + (i * (size + spacing)), y, size, size);
}