Text inside circle with canvas

Asked

Viewed 560 times

2

I’m starting in canvas and despite very good documents by the web, specific questions arise.
For example, I’d like to put a number inside a circle, but I’ve only got the number, not the circle. I have the following code:

var canvas = document.getElementById("canvas");
ctx = canvas.getContext('2d');

ctx.arc(100,75,50,0,2*Math.PI);
ctx.font="20px Georgia";
ctx.fillText("1",50,50);
<canvas id="canvas" width="200px" height="200px"></canvas>

javascript canvas

  • you wouldn’t have to fill in the circle first and then create the text?

  • Like I said, I’m still getting started. I figured in the third line I was doing just that.

  • ctx.beginPath(); tries this @Edit has a post on stackoverflow English http://stackoverflow.com/questions/14539837/how-to-draw-circles-in-html5-canvas-with-text-in-them draw the circle first then draw the text above

  • I edited the question as indicated, but it still doesn’t work... I opened the example of the answer, and at least in my browser it didn’t work.

  • It did work @Lucasbertollo , I had put with white background. Put this answer so that I accept, I will return the question to what was before...

  • has a code of a boy I helped to create "blocks" of a studied p/ tu see how cool is a game http://answall.com/a/82847/12032

Show 1 more comment

1 answer

2


Take the example of:

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');


ctx.beginPath();    
ctx.arc(77,76,75,0,2*Math.PI);
ctx.fillStyle="grey";
ctx.fill();
ctx.stroke();


ctx.beginPath();    
ctx.font="25px Verdana";
ctx.fillStyle="blue";
ctx.fillText("1",50,50);



</script>

</body>
</html>

To learn about the functions and parameters have a good and practical literature here:

http://www.w3schools.com/html/html5_canvas.asp

Browser other questions tagged javascript canvas

You are not signed in. Login or sign up in order to post.