filltext using coordinates - Javascript Canvas

Javascript examples for Canvas:Text

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

Description

filltext using coordinates

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:10px; }
canvas{border:1px solid red;}

      </style> 
      <script>
$(function(){/*from  w ww  . j a v  a 2s.  c  o  m*/
    var canvas1=document.getElementById("canvas");
    var context=canvas1.getContext("2d");
    context.beginPath();
    context.fillStyle="yellow";
    context.strokeStyle="black";
    context.font="20px Georgia";
    context.lineWidth=10;
    context.arc(100,100, 75, 0 , 2 * Math.PI, false);
    context.fill();
    context.beginPath();
    context.fillStyle="red";
    context.fillText("Hello World!",40,100);
    context.fill();
}); // end $(function(){});

      </script> 
   </head> 
   <body> 
      <canvas id="canvas" width="300" height="300"></canvas>
      <br>  
   </body>
</html>

Related Tutorials