feat(wordcloud): accept custom canvas

[pearmini]

WordCloud Mark 支持传入自定义的 Canvas，可以用于服务端渲染。

const chart = new Chart({
  createCanvas: () => {
    // 传入自定义的 Canvas
    return document.createElement('canvas');
  },
});

chart.options({
  type: 'wordCloud',
  data: {
    type: 'fetch',
    value: 'data/philosophyWord.json',
  }
});

• code
• test
• docs

[hustcc]

不是这样的，应该是还是用 G 的 canvas，这样在 g2-ssr 中直接传入 node-canvas 就可以了，这样用户不敢感知了，不然对于 ssr，用户还需要对 词云图的 mark 做特殊的配置。

[pearmini]

不是这样的，应该是还是用 G 的 canvas，这样在 g2-ssr 中直接传入 node-canvas 就可以了，这样用户不敢感知了，不然对于 ssr，用户还需要对 词云图的 mark 做特殊的配置。

这里需要一个新的 canvas 吧？不应该是 G 的 canvas，毕竟这里会对传入的 canvas 操作。ssr 应该传入一个新的 node-canvas 才对？

[coveralls]

Pull Request Test Coverage Report for Build 9888515796

Details

• 30 of 31 (96.77%) changed or added relevant lines in 5 files are covered.
• No unchanged relevant lines lost coverage.
• Overall coverage increased (+0.3%) to 86.587%

---

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
src/runtime/plot.ts	24	25	96.0%

Totals
Change from base Build 9858605089:	0.3%
Covered Lines:	10444
Relevant Lines:	11684

---

💛 - Coveralls

[lvisei]

不是这样的，应该是还是用 G 的 canvas，这样在 g2-ssr 中直接传入 node-canvas 就可以了，这样用户不敢感知了，不然对于 ssr，用户还需要对 词云图的 mark 做特殊的配置。

是的，渲染的时候是使用 renderChart 方法，透传了 createCanvas 方法

// https://github.com/pearmini/g2-ssr-node/blob/main/src/render.js
import { stdlib, render as renderChart, G2Context } from '@antv/g2';

export function render(type?: 'pdf' | 'svg') {
  return async (options: any) => {
    const { width = 640, height = 480, ...rest } = options;
    const [gCanvas, canvas] = createGCanvas(width, height, type);
    const spec = { ...rest, width, height };
    const context: G2Context = {
      canvas: gCanvas,
      library: updateLight(stdlib),
      createCanvas: () => createCanvas(300, 150),
    };
    await new Promise((resolve: any) => renderChart(spec, context, resolve));
    return canvas;
  };
}

[pearmini]

@hustcc 我重构了一下 runtime，可以把 context（包括 createCanvas）透穿给各个可视化组件。