HarmonyOS 鸿蒙Next Canvas如何触发刷新重复绘制？

同问，变化时有日志，但是Canvas没刷新；

06-28 10:47:55.820   41283-41290  C01C10/ImsaKit                 com.huifu...merchant  I     [nodict]line: 864, function: DeleteLeft,length: 1

06-28 10:47:55.820   41283-41283  A03D00/JSAPP                   com.huifu...merchant  I     this.inputText deleteLeft  this.inputText===125 length1

06-28 10:47:55.820   41283-41283  A01111/hlmMerchantTag          com.huifu...merchant  D     HlmPwdTextInput onReady 290   42

06-28 10:47:55.820   41283-41283  A01111/hlmMerchantTag          com.huifu...merchant  D          31.666666666666668   51.66666666666667   41

06-28 10:47:55.822   41283-41283  A01111/hlmMerchantTag          com.huifu...merchant  D     HlmPwdTextInput initDrawData  offContext.save()

[@Component](/user/Component)
export struct HlmPwdTextInput {
  [@Link](/user/Link) inputStr: string
  //订死宽高，让外部自己设置大小？
  static inputWidth: number = 290
  static inputHeight: number = 42
  onCompleted?: (inputStr: string) => void;
  private settings: RenderingContextSettings = new RenderingContextSettings(true);
  private context: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
  private offCanvas: OffscreenCanvas = new OffscreenCanvas(290, 42);
  private lineWidth: number = 0;
  private lineAndSpace: number = 0;
  private lineTopMargin: number = 0;
  //软键盘
  inputController?: inputMethod.InputMethodController
  isAttached: boolean = false;
  keyboardStatus: inputMethod.KeyboardStatus = inputMethod.KeyboardStatus.NONE;

  build() {
    Column() {
      Canvas(this.context)
        .width('100%')
        .height('100%')
        .onReady(() => {
          this.drawInput();
        })
    }
    .backgroundColor('#9f9')
    .width(HlmPwdTextInput.inputWidth)
    .height(HlmPwdTextInput.inputHeight)
    .onTouch(() => {
      this.attachAndListener();
    })
  }

  drawInput() {
    this.initDrawData();
    let offContext = this.offCanvas.getContext("2d", this.settings);
    offContext.clearRect(0, 0, HlmPwdTextInput.inputWidth, HlmPwdTextInput.inputHeight);
    //中心文字
    offContext.strokeStyle = '#999999';
    offContext.lineWidth = 1;
    offContext.beginPath();
    for (let index = 0; index < 6; index++) {
      offContext.moveTo(index * (this.lineAndSpace), this.lineTopMargin);
      offContext.lineTo(this.lineWidth + index * (this.lineAndSpace), this.lineTopMargin);
      offContext.closePath();
      offContext.stroke();
    }

    offContext.fillStyle = '#333333';
    for (let index = 0; index < this.inputStr.length; index++) {
      const x = this.lineWidth / 2 + index * (this.lineAndSpace);
      const y = HlmPwdTextInput.inputHeight / 2;
      offContext.moveTo(x, y);
      offContext.arc(x, y, 6, 0, Math.PI * 2);
      offContext.fill();
    }
    offContext.save();

    LogUtils.d(`HlmPwdTextInput initDrawData  offContext.save()`)
    let image = this.offCanvas.transferToImageBitmap()
    this.context.transferFromImageBitmap(image)
  }

  aboutToAppear(): void {
    this.inputController = inputMethod.getController();
  }

  aboutToDisappear(): void {
    this.detach();
  }

  initDrawData() {
    this.lineWidth = (HlmPwdTextInput.inputWidth - 5 * 20) / 6;
    this.lineAndSpace = this.lineWidth + 20;
    this.lineTopMargin = HlmPwdTextInput.inputHeight - 1;
    LogUtils.d(`HlmPwdTextInput onReady ${HlmPwdTextInput.inputWidth}   ${HlmPwdTextInput.inputHeight}
     ${this.lineWidth}   ${this.lineAndSpace}   ${this.lineTopMargin}`)
  }

  // 绑定和设置监听
  async attachAndListener() {
    // 输入法配置项
    let textConfig: inputMethod.TextConfig = {
      inputAttribute: {
        textInputType: inputMethod.TextInputType.NUMBER,
        enterKeyType: inputMethod.EnterKeyType.DONE
      }
    };
    this.inputController?.attach(true, textConfig, (err, data) => {
      LogUtils.d(`err=${err?.message || ''};  data: ${data}`)
    })

    // 控件绑定输入法
    if (!this.isAttached) {
      this.attachListener();
    }
    this.isAttached = true;
  }

  /**
   * 订阅输入法回调
   */
  attachListener(): void {
    // 订阅输入法应用插入文本事件
    this.inputController?.on('insertText', (text) => {
      if (this.inputStr.length >= 6) {
        setTimeout(() => {
          if (this.onCompleted) {
            this.onCompleted(this.inputStr);
          }
        }, 251);
        return;
      }
      this.inputStr += text;
      console.info("this.inputText", "insertText this.inputText===" + this.inputStr);
      this.drawInput();
      // this.context = new CanvasRenderingContext2D(this.settings);
    })

    // 订阅输入法应用向左删除事件
    this.inputController?.on('deleteLeft', (length) => {
      this.inputStr = this.inputStr.substring(0, this.inputStr.length - 1);
      console.info("this.inputText", "deleteLeft  this.inputText===" + this.inputStr, 'length' + length)
      this.drawInput();
    })

    // 订阅输入法应用发送输入法软键盘状态事件
    this.inputController?.on('sendKeyboardStatus', (keyboardStatus: inputMethod.KeyboardStatus) => {
      this.keyboardStatus = keyboardStatus;
      console.info("ImsaKit this.inputText keyboardStatus= " + this.keyboardStatus)
    })
  }

  //解绑输入法
  detach() {
    this.inputController?.off('insertText');
    this.inputController?.off('deleteLeft');
    this.inputController?.off('sendKeyboardStatus');
    this.inputController?.detach((err: BusinessError) => {
      if (err) {
        console.error(`Failed to detach: ${JSON.stringify(err)}`);
        return;
      }
      this.isAttached = false
      console.log('Succeeded in detaching inputMethod.');
    });
  }
}