Change clipping to "squircle" clip path

[mrcgrtz]

Apply a Path2D to canvas as in example 3: https://stackoverflow.com/questions/32979585/how-to-squircle-an-app-icon-image-with-just-css#32981019

const path = new Path2D('M100,200c43.8,0,68.2,0,84.1-15.9C200,168.2,200,143.8,200,100s0-68.2-15.9-84.1C168.2,0,143.8,0,100,0S31.8,0,15.9,15.9C0,31.8,0,56.2,0,100s0,68.2,15.9,84.1C31.8,200,56.2,200,100,200z');

Maybe use https://github.com/google/canvas-5-polyfill

[mrcgrtz]

An alternative method for creating a squircle on a canvas would be bezierCurveTo(), see here:

const squircle = (ctx, x, y, size) => {
  const hsize = size / 2; // half size
  x -= hsize; // reposition in the middle
  y -= hsize;
  ctx.save();
  ctx.translate(x, y);
  ctx.beginPath();
  ctx.moveTo(hsize, 0);
  ctx.bezierCurveTo(0, 0, 0, 0, 0, hsize);
  ctx.bezierCurveTo(0, size, 0, size, hsize, size);
  ctx.bezierCurveTo(size, size, size, size, size, hsize);
  ctx.bezierCurveTo(size, 0, size, 0, hsize, 0);
  ctx.closePath();
  ctx.restore();
};

bezierCurveTo() is supported by node-canvas@>=0.0.1.