var canvas=document.getElementById("drawGrafics");
var x=canvas.getContext("2d");
x.font='10px Verdana';
x.strokeStyle='RED';
x.strokeText("20грн", 0, 50);  
x.strokeStyle='GREEN';
x.strokeText("10грн", 0, 150); 
x.lineWidth=2;
x.strokeStyle='BLACK';
x.strokeRect(30,10,600,240);
x.lineWidth=1;


  for(var xp=30;xp<630;xp+=20){
  x.moveTo(xp,10);
  x.lineTo(xp,250);
  }
  x.stroke();

  
  for(var yp=10;yp<250;yp+=20){
    x.beginPath();
    if(yp===30){
         x.strokeStyle='RED';
    }else{
         x.strokeStyle='GREEN';
    }
     x.moveTo(30,yp);
     x.lineTo(630,yp);
     x.stroke();
  }