1

Good day ! I am working and creating a spinning roulette and I'm trying to insert a value into my canvas so I will not add value manually into the code , and this is an array texts, so I will insert many arrays into my canvas, but the problem is the text is not displaying, but when I add text manually into my array [ ] then it is displaying

Here is what my UI looks like without value/array texts in it

Spinner Roulette without Values in it

And when I added value in this code like:

var options = ["Winner 1", "Winner 2"];

Then this is the output

enter image description here

The problem now is I cannot add value when inserted into my textbox. please advise me thank you!

    var options = ["Winner 1", "Winner 2"];

    var startAngle = 0;
    var arc = Math.PI / (options.length / 2);
    var spinTimeout = null;
    
    var spinArcStart = 10;
    var spinTime = 0;
    var spinTimeTotal = 0;
    
    var ctx;
    
    document.getElementById("spin").addEventListener("click", spin);
    
    function pushData(){
      var inputText = document.getElementById('inputText').value;
    
      options.push(inputText);
    
      var pval = "";
    
      for(i = 0; i<options.length; i++){
        pval = pval + options[i];
      }
    
      document.getElementById('canvas').innerHTML =pval;
    }
    
    function byte2Hex(n) {
      var nybHexString = "0123456789ABCDEF";
      return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
    }
    
    function RGB2Color(r,g,b) {
    	return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
    }
    
    function getColor(item, maxitem) {
      var phase = 0;
      var center = 128;
      var width = 127;
      var frequency = Math.PI*2/maxitem;
      
      red   = Math.sin(frequency*item+2+phase) * width + center;
      green = Math.sin(frequency*item+0+phase) * width + center;
      blue  = Math.sin(frequency*item+4+phase) * width + center;
      
      return RGB2Color(red,green,blue);
    }
    
    function drawRouletteWheel() {
      var canvas = document.getElementById("canvas");
      if (canvas.getContext) {
        var outsideRadius = 200;
        var textRadius = 160;
        var insideRadius = 125;
    
        ctx = canvas.getContext("2d");
        ctx.clearRect(0,0,500,500);
    
        ctx.strokeStyle = "black";
        ctx.lineWidth = 2;
    
        ctx.font = 'bold 12px Helvetica, Arial';
    
        for(var i = 0; i < options.length; i++) {
          var angle = startAngle + i * arc;
          //ctx.fillStyle = colors[i];
          ctx.fillStyle = getColor(i, options.length);
    
          ctx.beginPath();
          ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
          ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
          ctx.stroke();
          ctx.fill();
    
          ctx.save();
          ctx.shadowOffsetX = -1;
          ctx.shadowOffsetY = -1;
          ctx.shadowBlur    = 0;
          ctx.shadowColor   = "rgb(220,220,220)";
          ctx.fillStyle = "black";
          ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 
                        250 + Math.sin(angle + arc / 2) * textRadius);
          ctx.rotate(angle + arc / 2 + Math.PI / 2);
          var text = options[i];
          ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
          ctx.restore();
        } 
    
        //Arrow
        ctx.fillStyle = "black";
        ctx.beginPath();
        ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
        ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
        ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
        ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
        ctx.fill();
      }
    }
    
    function spin() {
      spinAngleStart = Math.random() * 10 + 10;
      spinTime = 0;
      spinTimeTotal = Math.random() * 3 + 4 * 1000;
      rotateWheel();
    }
    
    function rotateWheel() {
      spinTime += 30;
      if(spinTime >= spinTimeTotal) {
        stopRotateWheel();
        return;
      }
      var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
      startAngle += (spinAngle * Math.PI / 180);
      drawRouletteWheel();
      spinTimeout = setTimeout('rotateWheel()', 30);
    }
    
    function stopRotateWheel() {
      clearTimeout(spinTimeout);
      var degrees = startAngle * 180 / Math.PI + 90;
      var arcd = arc * 180 / Math.PI;
      var index = Math.floor((360 - degrees % 360) / arcd);
      ctx.save();
      ctx.font = 'bold 30px Helvetica, Arial';
      var text = options[index]
      ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
      ctx.restore();
    }
    
    function easeOut(t, b, c, d) {
      var ts = (t/=d)*t;
      var tc = ts*t;
      return b+c*(tc + -3*ts + 3*t);
    }
    
    drawRouletteWheel();
<!-- Spin the wheel -->
<div class="container">
	<input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>

<!-- The Wheel -->
<div class="text-center">
	<canvas id="canvas" width="500" height="500"></canvas>
</div>

<hr>

<!-- Insert new values -->
<div class="container col-md-4">
	<input type="text" class="form-control" id="inputText" name="inputText" /><br>
	<button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>

Improve this question
5
  • Why you cannot add value, can you explain in details ? Commented Sep 4, 2019 at 6:25
  • @Casper - Good day sir, the logic is fine, I can add value on a <p id="name"></p> but not in <canvas id="name></canvas> would you like to see the whole javascript code? I'll edit it now.. Commented Sep 4, 2019 at 6:28
  • @Casper - I've already edited the code, please take a look.. you see I cannot add value to the wheel which is the canvas. Commented Sep 4, 2019 at 6:29
  • I think once you push new elements you need to redraw canvas again. call this function drawRouletteWheel() inside pushData function. Commented Sep 4, 2019 at 6:40
  • Add some validation to your code, when you get the value, instead of just dereferencing getValueById, check it first as being correct then access the value and test that too, typeof value == "string" && value.length > 0 ? Commented Sep 4, 2019 at 6:48

1 Answer 1

Reset to default
1

This is solution for you issue:

just make following changes in pushData function:

function pushData(){
  var inputText = document.getElementById('inputText').value;
  options.push(inputText);
  drawRouletteWheel();
}

Also, you need to calculate the arc inside the drawRouletteWheel function. since the option element length will change.

arc = Math.PI / (options.length / 2);


var options = ["Winner 1", "Winner 2" , "d"];


var startAngle = 0;
var spinTimeout = null;
var arc = 0;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;

var ctx;

document.getElementById("spin").addEventListener("click", spin);

function pushData(){
  var inputText = document.getElementById('inputText').value;
  options.push(inputText);
  drawRouletteWheel();
}

function byte2Hex(n) {
  var nybHexString = "0123456789ABCDEF";
  return String(nybHexString.substr((n >> 4) & 0x0F,1)) + nybHexString.substr(n & 0x0F,1);
}

function RGB2Color(r,g,b) {
    return '#' + byte2Hex(r) + byte2Hex(g) + byte2Hex(b);
}

function getColor(item, maxitem) {
  var phase = 0;
  var center = 128;
  var width = 127;
  var frequency = Math.PI*2/maxitem;

  red   = Math.sin(frequency*item+2+phase) * width + center;
  green = Math.sin(frequency*item+0+phase) * width + center;
  blue  = Math.sin(frequency*item+4+phase) * width + center;

  return RGB2Color(red,green,blue);
}

function drawRouletteWheel() {
  var canvas = document.getElementById("canvas");
  if (canvas.getContext) {
    var outsideRadius = 200;
    var textRadius = 160;
    var insideRadius = 125;

    ctx = canvas.getContext("2d");
    ctx.clearRect(0,0,500,500);

    ctx.strokeStyle = "black";
    ctx.lineWidth = 2;

    ctx.font = 'bold 12px Helvetica, Arial';
    //console.log(options.length)
    arc = Math.PI / (options.length / 2);
    for(var i = 0; i < options.length; i++) {
      var angle = startAngle + i * arc;
      //ctx.fillStyle = colors[i];
      ctx.fillStyle = getColor(i, options.length);

      ctx.beginPath();
      ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
      ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
      ctx.stroke();
      ctx.fill();

      ctx.save();
      ctx.shadowOffsetX = -1;
      ctx.shadowOffsetY = -1;
      ctx.shadowBlur    = 0;
      ctx.shadowColor   = "rgb(220,220,220)";
      ctx.fillStyle = "black";
      ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 
                    250 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = options[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();
    } 

    //Arrow
    ctx.fillStyle = "black";
    ctx.beginPath();
    ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
    ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
    ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
    ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
    ctx.fill();
  }
}

function spin() {
  spinAngleStart = Math.random() * 10 + 10;
  spinTime = 0;
  spinTimeTotal = Math.random() * 3 + 4 * 1000;
  rotateWheel();
}

function rotateWheel() {
  spinTime += 30;
  if(spinTime >= spinTimeTotal) {
    stopRotateWheel();
    return;
  }
  var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
  startAngle += (spinAngle * Math.PI / 180);
  drawRouletteWheel();
  spinTimeout = setTimeout('rotateWheel()', 30);
}

function stopRotateWheel() {
  clearTimeout(spinTimeout);
  var degrees = startAngle * 180 / Math.PI + 90;
  var arcd = arc * 180 / Math.PI;
  var index = Math.floor((360 - degrees % 360) / arcd);
  ctx.save();
  ctx.font = 'bold 30px Helvetica, Arial';
  var text = options[index]
  ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
  ctx.restore();
}

function easeOut(t, b, c, d) {
  var ts = (t/=d)*t;
  var tc = ts*t;
  return b+c*(tc + -3*ts + 3*t);
}

drawRouletteWheel();
 <!-- Spin the wheel -->
<div class="container">
    <input type="button" class="mt-5 btn btn-lg btn-primary btn-block" value="SPIN THE WHEEL" style="float:left;" id='spin' />
</div>

<!-- The Wheel -->
<div class="text-center">
    <canvas id="canvas" width="500" height="500"></canvas>
</div>

<hr>

<!-- Insert new values -->
<div class="container col-md-4">
    <input type="text" class="form-control" id="inputText" name="inputText" /><br>

    <button class="btn btn-block btn-success" onclick="pushData();" type="button">ADD</button>
</div>

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Good day! sir, can you please explain what is added to your code? why my for loop was removed at the pushData function?
The for loop was not needed since you cannot add value to canvas using this document.getElementById('canvas').innerHTML =pval;. canvas needs to be rebuild by adding the value to options array
Your code seems to work fine, but the result which is in the middle was not defined / display like if the chosen winner is "Winner 1" then the winner is not display in your code sir,
@Rishab- yep figured it out too, thought there was an error on my drawRoulette function, turns out there's a missing variable at the top. thank you! works fine :)
how can I remove the winner or the selected winner of the wheel after the roulette stopped? please sir, this is the final piece.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.