Rendering graphics using Canvas and Path2D polyfill on node

index.js

// node-canvas
var Canvas = require('canvas')
console.log('Canvas is', Canvas)
var nodeCanvas = new Canvas(120, 120)
var ctx = nodeCanvas.getContext('2d')

// canvas-5-polyfill patches CanvasRenderingContext2D.prototype
// lets give it one
global.CanvasRenderingContext2D = {};
global.CanvasRenderingContext2D.prototype = ctx;

require('canvas-5-polyfill')

// square outline
var path1 = new Path2D();
path1.rect(10, 10, 100, 100);
ctx.stroke(path1);

// black square inside
var path2 = new Path2D();
path2.rect(20, 20, 80, 80);
ctx.fill(path2);

// green circle in the center
var path3 = new Path2D();
path3.arc(60, 60, 30, 0, 2 * Math.PI);
ctx.fillStyle = 'green';
ctx.fill(path3);

// canvas to PNG file
var fs = require('fs')
var out = fs.createWriteStream(__dirname + '/canvas.png');
var stream = nodeCanvas.pngStream();

stream.on('data', out.write.bind(out));
stream.on('end', console.log.bind(console, 'saved png'));

Thanks for this, saved me a lot of heartburn

skip modifying globals by using getting the CanvasRenderingContext2D object from canvas itself:

const { CanvasRenderingContext2D, createCanvas } = require('canvas')