CODEWITHSUNDEEP
javascriptfabricjs
Edin Puzic
Edin Puzic

Reputation: 1048

Adding rows and columns in FabricJS

How to add rows and columns in FabricJs Canvas.

Here is code on normal canvas:

var ctx = canvas.getContext('2d'),
    columns = 6,
    rows = 4,
    w, h, tileWidth, tileHeight;

DEMO: JSFIDDLE

Upvotes: 0

Views: 937

Answers (1)

Darryl Hebbes
Darryl Hebbes

Reputation: 1028

Take a look at this fiddle, it contains FabricJS code to implement a grid. Remember that FabricJS is a wrapper around the HTML 5 Canvas API.

jsfiddle 

var canvas = new fabric.Canvas('c', { selection: false });
var grid = 50;

// create grid
for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
}

Upvotes: 1

Related Questions