function Grid()
{
  Layer.call(this);

  this.el.id = "grid";

  this.draw = function(size = 60, step = 5)
  {
    this.clear();
    
    var x = 1;
    var size = size * 2;
    while(x < this.el.width/size){
      var y = 1;
      while(y < (this.el.height/size)-1){
        var is_marker = (x % step == 0 && y % step == 0)
        this.draw_vertex(x * size,y * size,is_marker)
        y += 1;
      }
      x += 1;
    }
  }

  this.draw_vertex = function(x,y,is_marker)
  {
    var ctx = this.context();
    var r = 1.5;
    ctx.beginPath();
    ctx.arc(x, y, 1.5, 0, 2 * Math.PI, false);
    ctx.fillStyle = is_marker ? '#000' : '#ccc';
    ctx.fill();
    ctx.closePath();
  }

  this.resize_to = function(size)
  {
    this.el.width = size.width * 2;
    this.el.height = size.height * 2;
    this.el.style.width = size.width+"px";
    this.el.style.height = size.height+"px";

    this.draw();
  }
}