CODEWITHSUNDEEP
javascripthtmlcanvasfabricjs
Ali ATriple
Ali ATriple

Reputation: 179

Fabric.js Draw_grid Cannot read property 'moveTo' of undefined

I've just started with fabric.js, and I want to draw a grid I've found this function but, I have the error : "Cannot read property 'moveTo' of undefined , I suppose I'm not in the correct scope, maybe I'm not sure... this is my code:

<html>
<head>
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
    <script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.2.0/fabric.all.min.js'></script>

</head>

<body>
   <canvas id="canvas" width="800" height="450" style="border:1px solid #000000"></canvas>


    <script>
        var canvas = new fabric.Canvas('canvas');
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));

        canvas.selectionColor = 'rgba(0,255,0,0.3)';
        canvas.selectionBorderColor = 'red';
        canvas.selectionLineWidth = 5;
        draw_grid(100);
//this is the function I found

function draw_grid(grid_size) {

  grid_size || (grid_size = 25);
  currentCanvasWidth = canvas.getWidth();
  currentcanvasHeight = canvas.getHeight();

  // Drawing vertical lines
  var x=0;
  for (x = 0; x <= currentCanvasWidth; x += grid_size) {
      this.grid_context.moveTo(x + 0.5, 0);
      this.grid_context.lineTo(x + 0.5, currentCanvasHeight);
  }

  // Drawing horizontal lines
      var y;
      for (y = 0; y <= currentCanvasHeight; y += grid_size) {
      this.grid_context.moveTo(0, y + 0.5);
      this.grid_context.lineTo(currentCanvasWidth, y + 0.5);
  }

  grid_size = grid_size;
  this.grid_context.strokeStyle = "black";
  this.grid_context.stroke();
}

</script>
</body>
</html>

Upvotes: 0

Views: 1588

Answers (1)

Khawer Zeshan
Khawer Zeshan

Reputation: 9646

You need to get the context like this var context = canvas.getContext("2d"); also there was a typo in currentcanvasHeight it should be currentCanvasHeight as you are using it below. Anyways here is the working code

var canvas = new fabric.Canvas('canvas');

canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
canvas.selectionColor = 'rgba(0,255,0,0.3)';
canvas.selectionBorderColor = 'red';
canvas.selectionLineWidth = 5;
draw_grid(100);

function draw_grid(grid_size) {
    var context = canvas.getContext("2d");
    grid_size || (grid_size = 25);
    var currentCanvasWidth = canvas.getWidth();
    var currentCanvasHeight = canvas.getHeight();

    // Drawing vertical lines
    var x=0;
    for (x = 0; x <= currentCanvasWidth; x += grid_size) {
        context.moveTo(x + 0.5, 0);
        context.lineTo(x + 0.5, currentCanvasHeight);
    }

    // Drawing horizontal lines
    var y;
    for (y = 0; y <= currentCanvasHeight; y += grid_size) {
        context.moveTo(0, y + 0.5);
        context.lineTo(currentCanvasWidth, y + 0.5);
    }

    grid_size = grid_size;
    context.strokeStyle = "black";
    context.stroke();
}

FIDDLE

Upvotes: 1

Related Questions