HarmonyOS 多张画布横向合成一张图片

需求是期望将多张画布横向合并成一张图片并保存，代码如下：

如何合成呢?

@Entry
@Component
struct NewCanvasPage {
  canvas: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  canvas2: CanvasRenderingContext2D = new CanvasRenderingContext2D();
  canvas3: CanvasRenderingContext2D = new CanvasRenderingContext2D();

  build() {
    Column() {
      Row() {
        Canvas(this.canvas)
          .layoutWeight(1)
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas.fillStyle = '#0000ff'
            this.canvas.fillRect(20, 20, 150, 100)
          })

        Canvas(this.canvas2)
          .layoutWeight(1)
          .margin({ left: 20, right: 20 })
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas2.font = '10vp sans-serif'
            this.canvas2.fillText("第二张画布", 20, 100)
          })

        Canvas(this.canvas3)
          .layoutWeight(1)
          .height('30%')
          .backgroundColor('#ffff00')
          .onReady(() => {
            this.canvas3.font = '20vp sans-serif'
            this.canvas3.fillText("第三张画布", 0, 100)
          })
      }.margin({ left: 15, right: 15 })

      Text("合成")
        .width(100)
        .height(40)
        .borderRadius(10)
        .backgroundColor($r('app.color.color_204adc'))
        .fontColor(Color.White)
        .textAlign(TextAlign.Center)
        .margin({ top: 20 })
        .fontSize(15)
        .onClick(() => {
          //合成
        })
    }
  }
}