Wsrtjtyk

I would like to write something directly inside the circle but I'm not sure how to. I know I could just write ctx.fillText(" test", 10, 30); and it would move to the right but I feel like that's an inefficient way of doing it.

How would I achieve this? Below is an image of what I'm referring to.

import React, {Component} from 'react';



class Login extends Component {    

    componentDidMount() {

        let c = document.getElementById("myCanvas");

        let ctx = c.getContext("2d");



        ctx.beginPath();

        ctx.arc(100,75,50,0,2*Math.PI);

        ctx.fillText("hey", 10, 30);

        ctx.stroke();

    }



    render() {

        return (

            <div>

                <canvas id="myCanvas" width="240" height="200"/>

            </div>    

        );

    }

}



export default Login;

You can use measureText to get the width of the your text and calculate coordinate for starting point for the text:

class App extends React.Component {

  componentDidMount() {

    let c = document.getElementById("myCanvas");

    let ctx = c.getContext("2d");



    const x_arc = 100;

    const y_arc = 75;

    const radius = 50;



    const text = "hey";

    const text_width = ctx.measureText(text).width;

    const x_text = x_arc - text_width / 2;

    const y_text = y_arc;



    ctx.beginPath();

    ctx.arc(x_arc, y_arc, radius, 0, 2 * Math.PI);

    ctx.fillText("hey", x_text, y_text);

    ctx.stroke();

  }



  render() {

    return (

      <div>

        <canvas id="myCanvas" width="240" height="200" />

      </div>

    );

  }

}

Here the link to sandbox: https://codesandbox.io/s/j377qol3ww

Well, if you do the math:

the x of the circle is: 100

the y of the circle is: 75

So, the text should be around (95, 80)

Note: the (x, y) coordinate of the text is dependent on the one of the circle. That's been said, you can make it more dynamic:

const circleCords = { x: 100, y: 75 }



// You can adjust the x, y of the text. Because `5` is just for testing. 

// I mean by that, that you would have to get the width of the text and then calculate how much you'd subtract from the circleCords!

const textCords = { x: circleCords - 5, y: circleCords + 5 }



ctx.arc(circleCords.x, circleCords.y, 50, 0,2*Math.PI);

ctx.fillText("hey", textCords.x, textCords.y);

If your text's width is always constant, you'll be fine by subtracting random number as desired. In this case 5.

Hope that could help!