CODEWITHSUNDEEP
node.jsnpmfabricjs
Alim Charaniya
Alim Charaniya

Reputation: 119

fabric JS not running on node after installing correctly

I want to use fabric js on a node server to generate SVG images. I followed the instructions to run fabric js on node in a mac environment. I'm trying to run the hello world fabric application from the fabric js documentation under nodejs examples.

If i run typeof require('canvas'); in the node shell. It returns 'function' as it should, according to fabricjs documentation Running typeof require('fabric'); also returns object as it should. Im pretty sure that I installed the dependencies correctly but not entirely sure why the code is not running as expected.

However, running the code results in this error: TypeError: fabric.createCanvasForNode is not a function

Here is the code I am trying to run.

I changed my python version to 2.7 and node is v 9.2.0 . All help is appreciated! 

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = fabric.createCanvasForNode(200, 200);

var text = new fabric.Text('Hello world', {
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
});
canvas.add(text);

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

Upvotes: 3

Views: 1931

Answers (2)

Julian Weimer
Julian Weimer

Reputation: 150

Dez' Answer almost satisfied me, but it was not a fully working example. At least not for me. This is my result after digging a little bit deeper into the topic:

const { fabric } = require("fabric");
const canvas = new fabric.Canvas(null, {width: 500, height: 500});

const fs = require("fs");
const stream = canvas.createPNGStream();
const out = fs.createWriteStream("test.png");

var text = new fabric.Text("Hello world", {
  left: 100,
  top: 100,
  fill: "#f55",
  angle: 15
});

canvas.add(text);

canvas.renderAll();

stream.on('data', function(chunk) {
  out.write(chunk);
});

Upvotes: 3

Dez
Dez

Reputation: 5838

Seeing the problem you are getting I understand you are using a version over 2.0.0 and since said version it seems they have deprecated the method createCanvasForNode. You could easily confirm that by evaluating the fabric import and see the method is not available anymore.

From now on you can use fabric.Canvas or fabric.StaticCanvas.

var fs = require('fs'),
    fabric = require('fabric').fabric,
    out = fs.createWriteStream(__dirname + '/helloworld.png');

var canvas = new fabric.Canvas(200, 200);
// or either var canvas = new fabric.StaticCanvas(200, 200);

var text = new fabric.Text('Hello world', {
  left: 100,
  top: 100,
  fill: '#f55',
  angle: 15
});
canvas.add(text);

var stream = canvas.createPNGStream();
stream.on('data', function(chunk) {
  out.write(chunk);
});

Reference 1: https://github.com/kangax/fabric.js/issues/3885

Reference 2: https://github.com/kangax/fabric.js/issues/4586

Upvotes: 0

Related Questions