PaperJS + Node-Canvas

[Christian Schlueter]

Hi there,

I'm trying to paint a shape/path to a node canvas and than copy the result into another canvas. Unfortunately, there is no path visible on the canvas. Same example on client-side works fine.

Any suggestions? Following below and example of what I'm trying to do:

const jsdom = require('jsdom')

const paper = require('paper-jsdom-canvas')

let canvas = createCanvas(1000, 1000) // node-canvas

paper.setup(canvas);

path = new paper.Path({

    segments: path_coordinates,

    selected: false

})

path.simplify()

path.style = {

    ...

}

paper.view.update()

//paper.view.draw()

// ctx being another context

ctx.drawImage(canvas, 0, 0, ctx.canvas.width, ctx.canvas.height)

// path not visible  ?!??!

Thanks,

christian 

[Christian Schlueter]

Could it be the case, that while trying to draw one canvas into the other, the path is not yet drawn/updated? On client-side this is working when applying paper.view.update()  or paper.view.draw(), maybe this need to change server-side? 

[Christian Schlueter]

Mh, any insights, by someone in the knowing? Wrong channel? More chances via Github issues? Best, Christian 

[Samuel ASENSI]

Hey,

You should not use the `createCanvas` function from the node package but the one provided by Paper.js `paper.createCanvas(width, height)` (undocumented but made to be used under node environment).

Otherwise, Paper.js would create a new canvas instance dissociated from the one you provided.

The following example demonstrates a working implementation, you should easily be able to adapt it to your own use case.

const fs = require('fs');
const paper = require('paper-jsdom-canvas');

const canvas = paper.createCanvas(200, 200);
const canvas2 = paper.createCanvas(200, 200);

paper.setup(canvas);

new paper.Path.Circle({
    center: paper.view.center,
    radius: 50,
    fillColor: 'red'
});

paper.view.update();

canvas2.getContext('2d').drawImage(canvas, 0, 0);

const outputCanvas = (canvas, name) => {
    const out = fs.createWriteStream(__dirname + `/${name}.png`);
    canvas.createPNGStream().pipe(out);
    out.on('finish', () => console.log(`${name} file created`));
};

outputCanvas(canvas, 'canvas');
outputCanvas(canvas2, 'canvas2');

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/53e88e54-195f-4912-95dc-4a846bd0cdban%40googlegroups.com.

--

    Samuel ASENSI

[Christian Schlueter]

Hi, that did the trick, still not exactly sure what the difference is and why I can't e.g. do ctx.drawImage(canvas, 0, 0, width, height) where ctx is a context from a Node canvas and canvas is a paper.createCanvas(...). It says something like no canvas or image found. I solved this by exporting the paper canvas to an image and applying the image back to the "normal" node canvas. Thanks again.