Canvas text color issue when setting gradient to the text and text is including emojis

Question

vnersisyan OP

Created Jul ’24

Replies 0

Boosts 0

Participants 1

Hi everyone. I'm reaching out to you to get some help about the issue that I'm facing for last couple of weeks.

The problem is when I have HTML canvas element which is rendering some text which is including some emojis and I'm setting gradient color to that text. I'm expecting that after setting gradient emojis should not change their color, but the reality is that they also become colored. The issue is not reproducible in other major browsers. I'm attaching some screenshots and HTML code for you to have better understanding what I'm trying to achieve.

Thanks in advance. Screenshot 2024-07-19 at 15.56.56.png

Screenshot 2024-07-19 at 15.57.51.png

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style></style>
    </head>
    <body>
        <div id="emojis"></div>

        <script>
            const emojis = [
                0x1f600, 0x1f601, 0x1f603, 0x1f603, 0x1f604, 0x1f605, 0x1f606, 0x1f607, 0x1f609, 0x1f60a, 0x1f642,
                0x1f643, 0x1f355, 0x1f354,
            ];

            const emoji = [];
            const size = 80;
            const factor = 2;
            const placeholder = document.getElementById("emojis");

            for (let i = 0; i < 3; i++) {
                emoji.push({
                    x: size,
                    y: size,
                    src: getEmoji(),
                });
            }

            function loadCanvas(id, emo) {
                const canvas = document.createElement("canvas");
                canvas.id = id;
                placeholder.appendChild(canvas);
                const ctx = canvas.getContext("2d");
                loadEmoji(canvas, ctx, emo);
            }

            function loadEmoji(canvas, ctx, emo) {
                // Use the intrinsic size of image in CSS pixels for the canvas element
                canvas.width = w = size * factor;
                canvas.height = h = size * factor;

                const fontSize = size * (factor - 0.5);
                const offset = Math.floor((h - fontSize) / 4);

                ctx.font = `${size * (factor - 0.5)}px Arial`;
                ctx.textBaseline = "middle";
                ctx.textAlign = "center";

                emo.x = w / 2;
                emo.y = h - size + offset;
                const gradient = ctx.createLinearGradient(0, 0, canvas.width, 0);
                gradient.addColorStop("0", "magenta");
                gradient.addColorStop("0.5", "blue");
                gradient.addColorStop("1.0", "red");
                ctx.fillStyle = gradient;

                ctx.fillText(emo.src, emo.x, emo.y);
            }

            function getEmoji() {
                const len = emojis.length;
                const emos = Math.floor(Math.random() * len);

                return String.fromCodePoint(emojis[emos]);
            }

            window.onload = function () {
                emoji.forEach((emo, i) => {
                    const id = `canvas-0${i}`;
                    loadCanvas(id, emo);
                });
            };
        </script>
    </body>
</html>

Boost