Is possible to use emojis on segments?

[echeverrisantiago]

I'm using text right now but if could be possible to add emojis instead of text would be great 🔫

[zarocknz]

Possibly; I have not tried it myself. See https://stackoverflow.com/questions/56312457/how-to-load-and-draw-emojis-on-canvas-efficiently This seems to suggest you can provided the font used to render the text on the wheel supports it.

[lafkpages]

This wouldn't be a Winwheel.js limitation but a limitation of the Canvas API itself. According to the linked StackOverflow question, it is possible to just provide the emojis in the segment text.

[FilkerZero]

I have need of using emoji in segment titles where the wheel pointer is at the top, so I want the text (with emoji) upright(ish) at the top of the wheel.

I have found that Winwheel.js isn't doing well with Unicode emoji codepoints as characters in strings when using a non-default "textOrientation" property. On the whole, most emoji are above '\u{10000}' (not UTF-16). The property str.length and the methods str.charAt(pos) and str.at(pos), along with the alternative notation str[pos] seems not to handle codepoints that require 3 bytes or more to represent. Interestingly, str.codePointAt(pos) will return the codepoint correctly, but only if pos references the first byte of the character in the string.

I solved the problem by modifying my local copy of Winwheel.js to replace the sections of code in the method Winwheel.prototype.drawSegmentText that looks like:

   for (let c = (lines[i].length - 1); c >= 0; c--) {
       let character = lines[i].charAt(c);

       if (fillStyle) {
            this.ctx.fillText(character, centerX + lineOffset, yPos);
       }

       if (strokeStyle) {
           this.ctx.strokeText(character, centerX + lineOffset, yPos);
       }

      yPos -= yInc;
  }

with

   for (const character of lines[i]) {
       if (fillStyle) {
            this.ctx.fillText(character, centerX + lineOffset, yPos);
       }

       if (strokeStyle) {
           this.ctx.strokeText(character, centerX + lineOffset, yPos);
       }

      yPos -= yInc;
  }

This seems to work.

I got the information from this StackOverflow posting on how to extract characters with higher codepoints correctly.

Edit: I discovered the change worked, but my HTML was including the minimized version, Winwheel.min.js, which is not where I had made the change.