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

I have a canvas with a cycle in which there is some text on it, the text display with the stroke text function is perfectly fine , But the text is not displayed with the fillText.

  var ctx = canvas.getContext ("2d"); // Build gradient var grd = ctx.createLinearGradient (16,15,16,30); Grd.addColorStop (0, color1); Grd.addColorStop (1, Color2); // fill with shield 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 Cursor Gray"; Ctx.strokeText ("I", 11.27);   
 The above code is a part of the function that accepts the canvas and two colors to drag the object. With Filltext function it does not show anything thanks.   
 
 
 Please try the code below Its job is OK Hope you should be helpful and please let me know. Thank you.  
  & lt ;! DOCTYPE HTML & gt; & Lt; Html & gt; & Lt; Top & gt; & Lt; Style & gt; Body {margin: 0 px; Padding: 0 pixels; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Canvas id = "myCanvas" width = "578" height = "200" & gt; & Lt; / Canvas & gt; & Lt; Script & gt; Var Canvas = Document. GetElementById ('myCanvas'); Var reference = 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 Cursor Gray'; Context.lineWidth = 3; // stroke color reference .strokeStyle = 'blue'; Context.strokeText ('Hello World!', X, Y); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;