Someway to work with a transparent canvas?

[DiegoCanedo]

[LucasGabrielBecker]

Any work around?

[leneti]

Would also like to know how to make the canvas transparent

[italoiz]

I used the prop backgroundColor, like:

<SignatureScreen
  ref={signaturePadRef}
  onEnd={() => signaturePadRef.current?.readSignature()}
  onOK={handleSignature}
  onBegin={() => setDisabled(false)}
  webStyle={signatureWebStyle}
  backgroundColor="rgba(0, 0, 0, 0)" // <---
/>

Worked as expected.

[leneti]

This should no longer be needed starting version 4.2.0 as I changed the default background color to be transparent.

[takuya0206]

Hi, I am struggling for how to make my canvas transparent. In the following example, I have made the background color in the View component black. Thus, if it's transparent, black color should be visible. As a matter of fact, white color, which may be the background color in some layer of SignatureScreen component I guess, has appeared. Do you have any idea about how to make it transparent?

  const style = `.m-signature-pad {
    box-shadow: none; border: none;
    margin-left: 0px;
    margin-top: 0px;
  }
   .m-signature-pad--body
    canvas {
      background-color: rgba(0, 0, 0, 0);
    }
  .m-signature-pad--body {border: none}
  .m-signature-pad--footer {display: none; margin: 0px;}
  body,html {
     width: 100%;
     height: 100%;
  }
`

  return (
    <View style={styles.container}>
      <SignatureScreen
        backgroundColor='rgba(0, 0, 0, 0)'
        ref={ref}
        penColor='black'
        style={{ alignSelf: 'flex-start' }}
        webStyle={style}
      />
      <View style={styles.row}>
        <Button title="Clear" onPress={handleClear} />
      </View>
    </View>
  );
};


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
    position: 'relative',
    height: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
  row: {
    display: "flex",
    flexDirection: "row",
    justifyContent: 'space-between',
    width: '100%',
    alignItems: 'center',
  }
});

[YanYuanFE]

Hi, @takuya0206 , you can try this code:

<SignatureScreen
            ref={ref}
            onOK={handleSignature}
            style={styles.sign}
            webviewContainerStyle={styles.sign}
            webStyle={`
                .m-signature-pad {
                  background-color: transparent;
                }
        
                `}
        />

const styles = StyleSheet.create({
  container: {
    flex: 1,
    // alignItems: 'center',
    // justifyContent: 'center',
    padding: 10,
    backgroundColor: 'red',
  },
  sign: {
    backgroundColor: 'transparent'
  }
});

[YanYuanFE]

The next version will optimize the background settings, sorry

[takuya0206]

@YanYuanFE Thank you for your quick response. It works! I'm looking forward to the next version.