* Made compatible with segment text strings containing Unicode emoji (and any other characters) with code points that require 3 bytes to encode in UTF-8 in drawSegmentText()

* Made segment number wrap in `getRandomForSegment()` (extends the change from PR zarocknz#102)
* Applied the change from PR zarocknz#64, "Add Image Width/Height in `drawImage`"

Author: FilkerZero

Winwheel.js

@@ -796,6 +796,9 @@ Winwheel.prototype.drawSegmentText = function()
                 }
 
                 for (let i = 0; i < lines.length; i ++) {
+                    let lineChars = [...lines[i]];
+                    let lineLen = lineChars.length;
+
                     // If direction is reversed then do things differently than if normal (which is the default - see further down)
                     if (direction == 'reversed') {
                         // When drawing reversed or 'upside down' we need to do some trickery on our part.
@@ -888,8 +891,8 @@ Winwheel.prototype.drawSegmentText = function()
                             // Loop though and output the characters.
                             if (alignment == 'outer') {
                                 // In reversed mode outer means text in 6 o'clock segment sits at bottom of the wheel and we draw up.
-                                for (let c = (lines[i].length -1); c >= 0; c--) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = lineLen - 1; c >= 0; c--) {
+                                    let character = lineChars[c];
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -903,8 +906,8 @@ Winwheel.prototype.drawSegmentText = function()
                                 }
                             } else if (alignment == 'inner') {
                                 // In reversed mode inner text is drawn from top of segment at 6 o'clock position to bottom of the wheel.
-                                for (let c = 0; c < lines[i].length; c++) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = 0; c < lineLen; c++) {
+                                    let character = lineChars[c]; // lines[i].charAt(c);
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -928,8 +931,8 @@ Winwheel.prototype.drawSegmentText = function()
 
                                 let yPos = (centerY + innerRadius + ((outerRadius - innerRadius) / 2)) + centerAdjustment + margin;
 
-                                for (let c = (lines[i].length -1); c >= 0; c--) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = (lineLen - 1); c >= 0; c--) {
+                                    let character = lineChars[c]; // lines[i].charAt(c);
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -976,7 +979,8 @@ Winwheel.prototype.drawSegmentText = function()
                             let drawAngle = 0;
 
                             // If more than one character in the text then...
-                            if (lines[i].length > 1) {
+                            //if (lines[i].length > 1) {
+                            if (lineLen > 1) {
                                 // Text is drawn from the left.
                                 this.ctx.textAlign = 'left';
 
@@ -996,7 +1000,7 @@ Winwheel.prototype.drawSegmentText = function()
                                 // Next we want the text to be drawn in the middle of the segment, without this it would start at the beginning of the segment.
                                 // To do this we need to work out how much arc the text will take up in total then subtract half of this from the center
                                 // of the segment so that it sits centred.
-                                let totalArc = (anglePerChar * lines[i].length);
+                                let totalArc = (anglePerChar * lineLen);
 
                                 // Now set initial draw angle to half way between the start and end of the segment.
                                 drawAngle = seg.startAngle + (((seg.endAngle - seg.startAngle) / 2) - (totalArc / 2));
@@ -1019,10 +1023,10 @@ Winwheel.prototype.drawSegmentText = function()
                             // ----------------------
                             // Now the drawing itself.
                             // In reversed direction mode we loop through the characters in the text backwards in order for them to appear on screen correctly
-                            for (let c = lines[i].length; c >= 0; c--) {
+                            for (let c = lineLen; c >= 0; c--) {
                                 this.ctx.save();
 
-                                let character = lines[i].charAt(c);
+                                let character = lineChars[c];
 
                                 // Rotate the wheel to the draw angle as we need to add the character at this location.
                                 this.ctx.translate(centerX, centerY);
@@ -1177,8 +1181,8 @@ Winwheel.prototype.drawSegmentText = function()
                             if (alignment == 'outer') {
                                 // For this alignment we draw down from the top of a segment at the 12 o'clock position to simply
                                 // loop though the characters in order.
-                                for (let c = 0; c < lines[i].length; c++) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = 0; c < lineLen; c++) {
+                                    let character = lineChars[c];
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -1193,8 +1197,8 @@ Winwheel.prototype.drawSegmentText = function()
                             } else if (alignment == 'inner') {
                                 // Here we draw from the inner of the wheel up, but in order for the letters in the text text to
                                 // remain in the correct order when reading, we actually need to loop though the text characters backwards.
-                                for (let c = (lines[i].length -1); c >= 0; c--) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = (lineLen - 1); c >= 0; c--) {
+                                    let character = lineChars[c];
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -1226,8 +1230,8 @@ Winwheel.prototype.drawSegmentText = function()
                                 let yPos = (centerY - innerRadius - ((outerRadius - innerRadius) / 2)) - centerAdjustment - margin;
 
                                 // Now loop and draw just like outer text rendering.
-                                for (let c = 0; c < lines[i].length; c++) {
-                                    let character = lines[i].charAt(c);
+                                for (let c = 0; c < lineLen; c++) {
+                                    let character = lineChars[c];
 
                                     if (fillStyle) {
                                         this.ctx.fillText(character, centerX + lineOffset, yPos);
@@ -1313,10 +1317,10 @@ Winwheel.prototype.drawSegmentText = function()
                             // ----------------------
                             // Now the drawing itself.
                             // Loop for each character in the text.
-                            for (let c = 0; c < (lines[i].length); c++) {
+                            for (let c = 0; c < (lineLen); c++) {
                                 this.ctx.save();
 
-                                let character = lines[i].charAt(c);
+                                let character = lineChars[c];
 
                                 // Rotate the wheel to the draw angle as we need to add the character at this location.
                                 this.ctx.translate(centerX, centerY);
@@ -1929,22 +1933,35 @@ Winwheel.prototype.getRandomForSegment = function(segmentNumber)
 {
     let stopAngle = 0;
 
-    if (segmentNumber) {
-        if (typeof this.segments[segmentNumber] !== 'undefined') {
-            let startAngle = this.segments[segmentNumber].startAngle;
-            let endAngle = this.segments[segmentNumber].endAngle;
-            let range = (endAngle - startAngle) - 2;
+    // Ensure that the caller has specified a segment number
+    if (!segmentNumber) {
+        // Nope, they didn't. Use segment 0 as a default
+        console.log('segment number not specified, use 0 as a fallback value');
+        segmentNumber = 0;
+    }
+
+    // Wrap the segment number within the available segments; not sure
+    // if this actually is the correct code for this. -- dag
+    segmentNumber = segmentNumber % this.segments.length;
 
-            if (range > 0) {
-                stopAngle = (startAngle + 1 + Math.floor((Math.random() * range)));
-            } else {
-               console.log('Segment size is too small to safely get random angle inside it');
-            }
+    // Sanity check and only do something if the segment chosen actually exists
+    if (typeof this.segments[segmentNumber] !== 'undefined') {
+        // valid segment, determine the angular range the segment occupies
+        let startAngle = this.segments[segmentNumber].startAngle;
+        let endAngle = this.segments[segmentNumber].endAngle;
+        let range = (endAngle - startAngle) - 2;
+
+        // select a random angle within the segment's range to stop at
+        if (range > 0) {
+            stopAngle = (startAngle + 1 + Math.floor((Math.random() * range)));
         } else {
-            console.log('Segment ' + segmentNumber + ' undefined');
+            // the segment is collapsed, land at the boundary as a fallback
+            console.log('Segment size is too small to safely get random angle inside it');
+            stopAngle = startAngle;
         }
     } else {
-        console.log('Segment number not specified');
+        // Seems the segment is out-of-range or otherwise invalid
+        console.log('Segment ' + segmentNumber + ' undefined');
     }
 
     return stopAngle;