net mvc: Signaturepad toDataURL generates no line - asp.net-mvc

Question

Using Net MVC and Signaturepad, I´m taking a signature from users and generating a PNG by using this:
<canvas id="#("canvas" + flat.ID)" width="400" height="200" style="background-color: lightgrey;"></canvas>
<script type="text/javascript">
var canvas = document.querySelector("#("#canvas" + flat.ID)");
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
</script>
I´m storing the signature in a database by using
<button class="btn btn-shadow btn-block btn-primary" onclick="saveSignature('#Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', signaturePad.toDataURL(), '#flat.ID', '#ViewBag.AssemblyOrderID')">Speichern</button>
This does nothing but setting the value in database.
In database I find the generated string:
data:image/png;base64,iVBORw...
I´m loading the view and if the viewmodel has that string I´m displaying it as an image:
<img src="#flat.Signature" style="width: 100%; height: 200px;"/>
This is only showing the lightgrey background from signaturepad but not the handwritten signature.
Where is the problem?
edit: I also tried saving it to desktop, but this png is also only lightgrey without lines.

Answer 1

Problem were this lines of code:
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
Because of multiple canvas, as you can see from <canvas id="#("canvas" + flat.ID)" ..., the var signaturePad existed multiple times. Thus always the last var was used.
I solved it like this:
var pads = {};
...
pads["#("#canvas" + flat.ID)"] = new SignaturePad(canvas, {
backgroundColor: 'rgba(211,211,211, 1)',
penColor: 'rgb(0, 0, 0)'
});
and
onclick="saveSignature('#Url.Action("SaveSignature", "Home", new { Area = "AssemblyOrders" })', pads['#("#canvas" + flat.ID)'].toDataURL(), '#flat.ID', '#ViewBag.AssemblyOrderID')"