title: How to display a smoother gradient in HTML5 canvas?
body: <p>I have a html5 canvas in my web page.
  I have only put an image and a gradient in it.</p>
  
  <p>Canvas uses thic JS code to draw itself:</p>
  
  <pre><code>var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  ctx.clearRect ( 0 , 0 , canvas.width, canvas.height );
  var img = document.getElementById("slika");
  ctx.drawImage(img, 0, 0,canvas.width,canvas.height);
  var grd = ctx.createLinearGradient(x-400, 0, x, 0)
  grd.addColorStop(0.3,"hsla(360, 100%, 100%, 0)");
  grd.addColorStop(1,"hsla(360, 100%, 100%, 0.8)");
  ctx.fillStyle=grd;
  ctx.fillRect(0,0,canvas.width,canvas.height);
  
  ctx.font = "70px Arial";
  ctx.fillStyle = "black"
  ctx.textAlign = "right";
  ctx.fillText(textInput,canvas.width-50,canvas.height-120);
  </code></pre>
  
  <p>When it displays, the transition isn't very smooth, it just starts somewhere and ends somewhere.</p>
  
  <p>It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/a9qv8.jpg" alt="http://kendaj.net46.net/canvas-StackOverflow.png"></p>
  
  <p>I would like the transition to be smoother(I don't mean a wider gradient).</p>
  
  <p>Is there any way to do that?</p>
  
  <p>Thanks for answering.</p>