CODEWITHSUNDEEP
htmlcanvas
user3319029
user3319029

Reputation: 3

fillText() doesn't work while strokeText() works

I have a Canvas with a circle which has some text on it. text display perfectly fine with strokeText function but text doesn't get displayed with fillText.

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

  // Create gradient

 var grd = ctx.createLinearGradient(16,15,16,30);
  grd.addColorStop(0,color1);
  grd.addColorStop(1,color2);

  // Fill with gradient

  ctx.beginPath();
  ctx.arc(16,17,15,0,2*Math.PI,false);
  ctx.fillStyle = grd;
 ctx.fill();
 //ctx.strokeRect(75,50,50,50);
    ctx.font = "italic 35px cursive grey";
     ctx.strokeText("i",11,27);

The above code is part of a function that accepts canvas and two colors to draw the object. with fillText function it displays nothing. Thanks.

Upvotes: 0

Views: 1357

Answers (1)

Jebasuthan
Jebasuthan

Reputation: 5604

Please try the below code. Its working fine. Hope it should helpful for you. Please check and let me know. Thanks.

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body {
    margin: 0px;
    padding: 0px;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="578" height="200"></canvas>
    <script>
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      var x = 11;
      var y = 27;

      var grd = context.createLinearGradient(16,15,16,30);
      grd.addColorStop(0, '#00ABEB');
      grd.addColorStop(0.5, '#fff');
      grd.addColorStop(0.5, '#66CC00');
      grd.addColorStop(1, '#fff');
      context.fillStyle = grd;
      context.beginPath();
      context.arc(16,17,15,0,2*Math.PI);
      context.fill();

      //context.arc(16,17,15,0,2*Math.PI,false);
      //context.fillRect(10,10,780,130);

      context.font = 'italic 35px cursive grey';
      context.lineWidth = 3;
      // stroke color
      context.strokeStyle = 'blue';
      context.strokeText('Hello World!', x, y);

    </script>
  </body>
</html>

Upvotes: 1

Related Questions