HTML5 canvas text orientation circle inside wheel

canvas rotate image
canvas rotate image 90 degrees
canvas rotate around center
canvas rotate text
javascript rotate text
canvas translate
javascript rotate image on click
canvas properties

https://jsfiddle.net/5e7hwn8m/

Hi, I am trying to set a wheel with numbers and then inside selected ones identified from A to F (A, B, C, D, E and F).

The issue is A-F are are rotating like numbers, I don't want that and I can't seem to figure what to do to have them Facing my direction.

Can anyone point me in the right direction? jsfiddle code for reference: https://jsfiddle.net/5e7hwn8m/

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

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

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, 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)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      ctx.rotate(0);
      ctx.fillText(text, 0, 60);


      ctx.restore();

    }

  }
}



drawWheel();
html,
body {
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>

I'm not very sure if this is what you are asking. I am calculating the point where the letter should apear and I'm painting the letter without rotating. In the code I've marked the changes I've made.

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

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

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, 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)";
      //'#005def'
      ctx.fillStyle = '#444';
      
      /////////////////////////////////////////////////
      // calculating the position for the letter
      var x = 200 + Math.cos(angle + arc / 2) * 100;
      var y = 200 + Math.sin(angle + arc / 2) * 100;
      /////////////////////////////////////////////////
      
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      ctx.restore();// restore goes here
      
      
      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';

      // paint the letter  without rotating
      ctx.fillText(text, x, y);


      

    }

  }
}



drawWheel();
<canvas id="canvas" width="400" height="400"></canvas>

HTML5 Canvas For Dummies, See the example in A2: var width = 280; var height = 200; 5; var gap = 10; var hubRadius = 4. of Listing 7-2 Rectangles: As in code B2–3 Text: As in code B4 Circles: As in code C4–5 a new position or using rotation to draw new objects. the bicycle are drawn, including the wheels, chassis, chain, seat, and handlebar. The first step is to define the parameters of the circle. Keep in mind that the preceding circle is not one single arc drawn as a circle, but 10 sectors drawn around the center to make a circle. So each sector will subtend an angle of 36 degrees.

One way could do so would be by rendering your letters after your wheel.

You determine the angle the are at on the wheel using their position in your array. than using cos and sin find their position in pixel.

Rotating Wheel, Keep in mind that the above wheel is not one single arc drawn as a circle, but 10 Rotate the canvas about the centre of the wheel ctx.font = "15px verdana"; To draw a circle with HTML5 Canvas, we can create a full arc using the arc () method by defining the starting angle as 0 and the ending angle as 2 * PI. context. arc ( centerX, centerY, radius, 0, 2 * Math.

Your problem is that ctx.rotate() is relative to the current matrix transform, or if you will, to the current angle of rotation.

This means that your rotate(0) will do nothing. What you want is rotate( -currentAngle ). But before to call it, you'd have to set your text's position as the pivot of the rotation, i.e as the origin of our transform matrix, and this can be done by calling ctx.translate(text_x, text_x), and since we are now at the text position, we can call fillText with 0, 0 parameters:

// set the origin to the text's position
ctx.translate(0,60);
// reverse rotate
ctx.rotate(-currentAngle);
// draw at origin (0,0)
ctx.fillText(text, 0, 0);

var wheelNumbers = ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48", "49", "50", "51", "52", "53", "54", "55", "56", "57", "58", "59"];
//16 20 18 55 5 25
var wheelABCDEF = ["", "", "", "", "E", "", "", "", "",
  "", "", "", "", "", "", "A", "", "C", "",
  "B", "", "", "", "", "F", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "", "", "", "", "",
  "", "", "", "", "", "D", "", "", "", ""
];


var backgroundColours = ["#ffff00", "#ffff00", "#ffff00", "#ffff00", "#005def", "#ffff00", "#ffff00", "#ffff00", "#ffff00", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#66ffff", "#005def", "#66ffff", "#005def", "#66ffff", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#005def", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#c0c0c0", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#33cc33", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ff99ff", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb", "#005def", "#ffffbb", "#ffffbb", "#ffffbb", "#ffffbb"];
var startAngle = 4.7;
var arc = Math.PI / (wheelNumbers.length / 2);


var ctx;

function drawWheel() {
  var canvas = document.getElementById("canvas");

  canvas.width = canvas.scrollWidth;
  canvas.height = canvas.scrollHeight;

  if (canvas.getContext) {
    var outsideRadius = 150;
    var insideRadius = 120;
    var textRadius = 160;

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

    //ctx.strokeStyle = "black";
    ctx.lineWidth = 0.8;

    ctx.font = 'bold 12px Helvetica, Arial';

    for (var i = 0; i < wheelNumbers.length; i++) {
      var angle = startAngle + i * arc;
      ctx.fillStyle = backgroundColours[i];

      ctx.beginPath();
      ctx.arc(200, 200, outsideRadius, angle, angle + arc, false);
      ctx.arc(200, 200, 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)";
      //'#005def'
      ctx.fillStyle = '#444';
      ctx.translate(200 + Math.cos(angle + arc / 2) * textRadius, 200 + Math.sin(angle + arc / 2) * textRadius);
/* BEGIN EDIT*/
      // save the currentAngle in a variable
      var currentAngle = angle + arc / 2 + Math.PI / 2;
      ctx.rotate(currentAngle);
      var text = wheelNumbers[i];
      ctx.fillText(text, -ctx.measureText(text).width / 2, 0);

      text = wheelABCDEF[i];
      ctx.fillStyle = '#005def';
      // set the origin to the text's position
      ctx.translate(0,60);
      // reverse rotate
      ctx.rotate(-currentAngle);
      // draw at origin (0,0)
      ctx.fillText(text, 0, 0);
/* END EDIT*/
      ctx.restore();

    }

  }
}



drawWheel();
html,
body {
  margin: 0;
  padding: 0;
}
<!DOCTYPE html>
<html>

  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>

  <body>
    <canvas id="canvas" width="400" height="400"></canvas>

    <script src="sketch.js"></script>
  </body>

</html>

HTML5 Canvas and CSS3 by Examples: Graphics, Games and Animations, 4.3.2 Spinning wheels (Canvas) The task is to spinning the texts around its center​. The two text "L. messages are off 90 degrees in phase. 'ctxteXtAlignI"center'" is the trick to set the center the text message as the center-point reference for rotation. fillStyle = c ; ctx.translate( x, y ); ctx.rotate(rot * i++); ctx.arc(0,0,r,0,Math. Winwheel.js is a feature packed JavaScript library that allows you to easily create HTML5 canvas Winning / Prize Wheels, Pie graphs and other things using a highly configurable JavaScript class. Wheels can be animated using GreenSock's Animation Platform (TweenMax.js) which contain easing functions and many other powerful animation features.

HTML canvas rotate() Method, The rotation angle, in radians. To calculate from degrees to radians: degrees*​Math.PI/180. Example: to rotate 5 degrees, specify the following: 5  Definition and Usage. The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math.PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.

Creating a Roulette Wheel Using HTML5 Canvas, Creating a Roulette Wheel Using HTML5 Canvas That is what we are going to look at and learn to build in this tutorial. A few things should be ctx.arc(250, 250​, insideRadius, angle + arc, angle, true); ctx.stroke(); The text drawing is done using the fillText(text, x, y [, maxWidth ]) function. Let's take a  Drawing Text on the Canvas. To draw text on a canvas, the most important property and methods are: font - defines the font properties for the text; fillText(text,x,y) - draws "filled" text on the canvas; strokeText(text,x,y) - draws text on the canvas (no fill)

Introduction to jCanvas: jQuery Meets HTML5 Canvas, If you prefer, you can also use native HTML5 Canvas API methods with jCanvas. the coordinates corresponding to the rectangle's horizontal and vertical position inside the canvas. Arcs are portions of the rim of a circle. You can quickly draw text on the canvas with the aptly named drawText() method. HTML5 Large Canvas Scrolling Demo. Imagine we have this scenario. There are a very large stage 3000x3000 with many nodes inside. User wants to take a look into all nodes, but they are not visible at once.

Comments
  • I'm glad it works @user4561667. In this case would you consider accepting my answer?