starred/fonticon
1
0
Fork 0
mirror of https://github.com/devgg/fonticon.git synced 2026-08-24 02:24:17 -05:00
Code Issues Packages Projects Releases Wiki Activity

Properly center favicon

Browse Source
This commit is contained in:
Florian Gauger
2024-04-20 16:17:59 +02:00
parent 23c2c71732
commit 57e13a7eb4
1 changed files with 17 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/js/draw.js
+17 -3
View File
@@ -35,24 +35,38 @@ function setFont(icon, size) {
ctx.font = fontWeight + ' ' + (icon.si * size) / 100 + 'px "Font Awesome 5 ' + fontSuffix + '"';
}
function fillText(text) {
const textMetrics = ctx.measureText(text);
const horizontalAdjustment = (textMetrics.actualBoundingBoxLeft - textMetrics.actualBoundingBoxRight) / 2;
const verticalAdjustment = (textMetrics.actualBoundingBoxAscent - textMetrics.actualBoundingBoxDescent) / 2;
const horizontalCenter = canvasSize / 2 + horizontalAdjustment;
const verticalCenter = canvasSize / 2 + verticalAdjustment;
ctx.fillText(text, horizontalCenter, verticalCenter);
}
function draw() {
if (canvasSize > 0) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = s.backgroundColor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
setFont(s.icon, s.size);
ctx.fillStyle = 'rgba(0, 0, 0, 1)';
ctx.globalCompositeOperation = 'destination-out';
ctx.fillText(s.icon.uc, canvasSize / 2, canvasSize / 2);
fillText(s.icon.uc);
ctx.fillStyle = s.foregroundColor;
ctx.globalCompositeOperation = 'source-over';
fillText(s.icon.uc);
ctx.fillText(s.icon.uc, canvasSize / 2, canvasSize / 2);
if (s.stackedSelected) {
ctx.save();
setFont(s.stackedIcon, s.stackedSize);
ctx.globalCompositeOperation = 'xor';
ctx.fillText(s.stackedIcon.uc, canvasSize / 2, canvasSize / 2);
fillText(s.stackedIcon.uc);
ctx.restore();
}
canvasToFavicon(canvas);