CODEWITHSUNDEEP
javascriptcanvas
anam
anam

Reputation: 216

Adding text in nested circles using canvas?

I want to draw a circle inside another circle and then add text inside the new (small) circle (for example an alphabet).

I got the following so for far, any advice?

            <!DOCTYPE html>
            <html>
            <body>

            <canvas id="myCanvas" width="200" height="100" 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(95,50,40,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle ="red";
            ctx.fill();

            var dd = document.getElementById("myCanvas");
            var ddtx = dd.getContext("2d");
            ddtx.beginPath();
            ddtx.arc (96,50,35,2*Math.PI,1.99*Math.PI);
            ddtx.stroke();
            ddtx.fillStyle ="blue";
            ddtx.fill();

            var d = document.getElementById("myCanvas");
            var dtx = d.getContext("2d");
            dtx.beginPath();
            dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "white";
            dtx.fill(); 
            </script> 

            </body>
            </html>

Upvotes: 0

Views: 631

Answers (1)

KAD
KAD

Reputation: 11102

You can use the context text functions as follows : 

     var c = document.getElementById("myCanvas");
            var ctx = c.getContext("2d");
            ctx.beginPath();
            ctx.arc(95,50,40,0,2*Math.PI);
            ctx.stroke();
            ctx.fillStyle ="red";
            ctx.fill();

            var d = document.getElementById("myCanvas");
            var dtx = d.getContext("2d");
            dtx.beginPath();
            dtx.arc(95,50,10,2*Math.PI,1.9*Math.PI);
            dtx.stroke();
            dtx.fillStyle = "white";
            dtx.fill(); 


            dtx.fillStyle = "black"; // font color to write the text with
            var font = "bold 13px serif";
            dtx.font = font; // specify the font
            dtx.textBaseline = "top"; // set the baseline as top
            dtx.fillText("A", 90 ,43); // render the text with its x and y coordinates
 <!DOCTYPE html>
            <html>
            <body>

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



            </body>
            </html>

Upvotes: 2

Related Questions