Element canvas nie reaguje na zmianę grubości linii.

Próbuję narysować wykres takim kodem...

<script type="text/javascript">
      var c = document.getElementById("myCanvas");
      var ctx = c.getContext("2d");

      var lol_width  = 10;
      var lol_height = 10;


      ctx.fillStyle = "#1D1D3D";    //rysowanie tła.
      ctx.fillRect(0, 0, 196, 196);  
 

      ctx.strokeStyle = "#73A400";  //rysowanie dwóch jasnozielonych linii.
      ctx.lineWidth = 2;           

      ctx.moveTo(12,                 2);
      ctx.lineTo(12,                 17*lol_width + 24);
      ctx.moveTo(2,                  12);
      ctx.lineTo(17*lol_height + 24, 12);    

      ctx.stroke();  



      ctx.strokeStyle = "#51500";    //rysowanie reszty linii.
      ctx.lineWidth = 1;

      for (var i = 0; i < lol_width; i=i+1)
      {
        ctx.moveTo(30 + 17*i, 4);
        ctx.lineTo(30 + 17*i, 17*lol_width + 22);
      }

      for (var i = 0; i < lol_height; i=i+1)
      {
        ctx.moveTo(4,                  30 + 17*i);
        ctx.lineTo(17*lol_width + 22,  30 + 17*i);     
      }

      ctx.stroke();

    </script>

I mimo ze ewidentnie zmieniam grubość

ctx.lineWidth = 1;

to wygląda to tak.

Widać że ma grubość 2px. Czemu tak się dzieje?

Nie tylko tego nie słucha, a jeszcze skubany zrobił odległość pomiędzy liniami 20 zamiast 10.

;P
Już się domyśliłeś?