Inside text with canvas

Question

Inside text with canvas

Navigation

#1 by (2 votes)

2

I'm starting on canvas and despite very good documents over the web, specific questions arise. Home 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

asked by anonymous 27.08.2015 / 05:44

1 answer

Remove specific data in a stack doubt with the bootstrap grid system

score 2 · Accepted Answer

Follow this example:

<!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 has a good and practical literature here:

link