renderToContext2D method

void renderToContext2D(dynamic context2D)

Renders the signature to a HTML canvas.

Since this method is defined in the state object of SfSignaturePad, you have to use a global key assigned to the SfSignaturePad instance to call this method. This snippet shows how to use renderToContext2D in SfSignaturePadState.

Note: It requires dart:html import.

• Create a global key.

final GlobalKey<SfSignaturePadState> _signaturePadKey = GlobalKey();

• Create a SfSignaturePad and assign the global key to it.

SfSignaturePad(
  key: _signaturePadKey,
 );

• Call the renderToContext2D using the state object to export the signature into html canvas in web platform.

final canvas = html.CanvasElement(
       width: 500,
       height: 500);
final context = canvas.context2D;
_signaturePadKey.currentState!.renderToContext2D(context);
final blob = await canvas.toBlob('image/jpeg', 1.0);
final completer = Completer<Uint8List>();
final reader = html.FileReader();
reader.readAsArrayBuffer(blob);
reader.onLoad.listen((_) => completer.complete(reader.result));
Uint8List imageData = await completer.future;

Implementation

void renderToContext2D(dynamic context2D) {
  final RenderObject? signatureRenderBox = context.findRenderObject();

  if (signatureRenderBox is RenderSignaturePad) {
    signatureRenderBox.renderToContext2D(context2D);
  }
}