.canvas() API Performance

[petermikitsh]

Code:

let Trianglify = require('trianglify');
let t = new Trianglify({
  width: 1200,
  height: 1200,
  cell_size: 150,
  variance: 15,
  x_colors: ['#000000', '#0C8DCE', '#FFFFFF']
});
console.time('perf');
let canvas = t.canvas();
console.timeEnd('perf');

3 performance result examples:

perf: 176.996ms
perf: 169.336ms
perf: 175.662ms

Any ideas for improving the performance of the .canvas() call?

[petermikitsh]

I've rewritten my test. It seems performance gets much better once the node process is up a little bit longer:

let Trianglify = require('trianglify');

for (let i = 0; i < 20; i++) {
  console.time('perf' + i);
  let t = new Trianglify({
    width: 1200,
    height: 1200,
    cell_size: 150,
    variance: 15,
    x_colors: ['#000000', '#0C8DCE', '#FFFFFF']
  });
  console.time('perf');
  let canvas = t.canvas();
  console.timeEnd('perf' + i);
}

perf0: 208.294ms
perf1: 46.872ms
perf2: 24.443ms
perf3: 42.017ms
perf4: 33.741ms
perf5: 44.630ms
perf6: 19.954ms
perf7: 28.143ms
perf8: 17.851ms
perf9: 39.760ms
perf10: 17.741ms
perf11: 20.829ms
perf12: 29.119ms
perf13: 22.737ms
perf14: 30.170ms
perf15: 21.555ms
perf16: 18.072ms
perf17: 31.477ms
perf18: 18.976ms
perf19: 34.344ms

[qrohlf]

@petermikitsh what's your use case here? There's not a lot of optimization possible in the general-purpose canvas call, which assumes that the entire canvas needs to be re-drawn.

As for the results of your test, the speedup you're seeing is likely due to V8 JIT kicking in, which makes sense given the test parameters.

[petermikitsh]

My test was poorly designed. For my production use case, the performance is excellent.

When I placed this code into my express app (I have a REST endpoint that returns a binary image (using the canvas.toDataURL api). I'm getting ~100ms response times, which totally meets my needs.

[qrohlf]

Glad to hear. If you ever need to go faster, the best way to do it would probably be to write your own renderer using cairo directly instead of using .canvas(), which incurs the overhead of both jsdom and node-canvas.