title: Canvas paints the text incorrectly
body: <p>I wrote code which paints the text with canvas. It looks like as shown below:</p>
  
  <pre><code>        var canvas = $('&lt;canvas&gt;').css("width", width).css("height", me.scaleHeight);
          var context = canvas[0].getContext("2d");
          context.font = "30px sans-serif";
  
          for (var x = 0; x &lt; width; x++) {
              context.fillText(x*showValue, x*ppt*showValue, 20);
          }
  </code></pre>
  
  <p>canvas paints with this properties:</p>
  
  <pre><code>  fillStyle: "#000000"
    filter: "none"
    font:"30px sans-serif"
    globalAlpha:1
    globalCompositeOperation:"source-over"
    imageSmoothingEnabled:true
    imageSmoothingQuality:"low"
    lineCap:"butt"
    lineDashOffset:0
    lineJoin:"miter"
    lineWidth:1
    miterLimit:10
    shadowBlur:0
    shadowColor:"rgba(0, 0, 0, 0)"
    shadowOffsetX:0
    shadowOffsetY:0
    strokeStyle:"#000000"
    textAlign:"center"
    textBaseline:"top"
    webkitImageSmoothingEnabled:true
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/YYty3.jpg" rel="nofollow"><img src="https://i.stack.imgur.com/YYty3.jpg" alt="Resulted image"></a></p>
  
  <p>What property I have set is wrong?</p>