let canvas = document.body.appendChild(

  Object.assign(document.createElement('canvas'), {

    width: 200,

    height: 200

  })

);

let c = canvas.getContext("2d"),

  pixels = c.createImageData(canvas.width, canvas.height),

  size = canvas.width * canvas.height,

  width = canvas.width,

  index = 0,

  x, y,

  a = 1,

  col,

  scale = 0.01;

for (var i = 0; i < size; i++) {

  x = i % width;

  y = parseInt(i / width);

  x -= 110;

  y -= 100;

  x *= scale;

  y *= scale;

  // http://www-history.mcs.st-and.ac.uk/Curves/Trifolium.html

  col = (x * x + y * y) * (y * y + x * (x + a));

  if (col >= 4 * a * x * y * y) {

    col = 155;

  }

  pixels.data[index++] = col;

  pixels.data[index++] = col;

  pixels.data[index++] = col;

  pixels.data[index++] = 255;

}

c.putImageData(pixels, 0, 0);