Draw text and circle - Javascript Canvas

Javascript examples for Canvas:Circle

  1. HOME
  2. Javascript
  3. Canvas
  4. Circle

Description

Draw text and circle

Demo Code

ResultView the demo in separate window 

<!doctype html>
<html>
   <head> 
      <!-- reset css --> 
      <script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script> 
      <style>

body{ background-color: ivory; padding:20px;}
#canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*from ww  w .  j  a v a 2s. c  o m*/
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    options=[
    {t:1,speed:50},
    {t:2,speed:90},
    {t:3,speed:10},
    {t:4,speed:25},
    {t:5,speed:36},
    ];
    draw();
    function draw(){
        // Clear canvas
        for(var i=0;i<options.length;i++){
            option=options[i];
            drawMetallicArc(option);
            drawTextMarkers(option);
        }
    }
    function drawMetallicArc(option){
        var y=60;
        var radius=15;
        var x=option.t*50;
        ctx.beginPath();
        ctx.arc(x,y,radius,0,Math.PI*2,false);
        ctx.closePath();
        ctx.strokeStyle="blue";
        ctx.stroke();
    }
    function drawTextMarkers(option){
        var y=60
        var radius=15
        var top=y-radius-5;
        var x=option.t*50-5;  // -5 for digit spacing
        ctx.fillText(option.speed,x,top);
    }
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="350" height="100"></canvas>  
   </body>
</html>

Related Tutorials