jSignature working in ASP.NET Web Forms, but not in MVC4 - Why?

Question

I have recently used the jSignature plugin in an ASP.NET Web Forms project successfully. I am trying to add the same functionality to a new MVC4 project. When I try to run the MCV view featuring the jQuery functionality, in debug mode, the following error is thrown from the jSignature.min.js file:

"Microsoft JScript runtime error: Canvas element does not support 2d context. jSignature cannot proceed."

Both the Web Forms project and the MVC4 project are running from the same client machine, both in debug mode, from the same instance of Visual Studio 2010.

I also note that in the MVC4 project, in the Error List, there are 50 messages which refer to variables defined in the jSignature.min.js file.

Example: Line 35, Column 56 - 'b' is already defined.

Can anyone advise what is causing this, and what I need to do to get jSignature to work in the MVC4 project?

HMTL Code from MVC View as follows:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>jSigTest</title>

    <script type="text/javascript" src="../../Scripts/jquery-1.7.1.js"></script>
    <script type="text/javascript" src="../../Scripts/jSignature.min.js"></script>
    <script type="text/javascript">


        $(document).ready(function () {
            $("#SignatureDiv").jSignature();
        });

    </script>

</head>
<body>
    <div>
        This is a jSignature Test Page.

        <div id="SignatureDiv">
        </div>        
    </div>
</body>
</html>

while debugging, refrain from using `.min.js`. Try with `.js and tell us what the error is. Also show us your inplementation snippet — naveen, Aug 12 '16 at 11:49
There is no jSignature.js file just a jSignature.min.js file. — Childa75, Aug 12 '16 at 12:34
I'm using IE8 for both the Web Forms and MVC4 projects. The Web Forms poject works, the MVC4 project throws an error. — Childa75, Aug 12 '16 at 12:36
Quick google of the error message : http://stackoverflow.com/questions/22167388/jquery-signature-not-working-for-ie-9 — Noémie Lord, Aug 12 '16 at 12:52

score 1 · Accepted Answer · answered Aug 12 '16 at 14:14

This is not an MVC issue, this is about not referencing fallback script and accompanying swf. That is why I asked whether you are using IE7-IE8.

Issue:

jSignature uses canvas element for the plugin. IE7-IE8 doesn't support canvas and that is causing the error. If you look at the source, you can see this

function initializeCanvasEmulator(canvas){
    if (canvas.getContext){
        return false
    } else {
        var window = canvas.ownerDocument.parentWindow
        var FC = window.FlashCanvas ?
            canvas.ownerDocument.parentWindow.FlashCanvas :
            (
                typeof FlashCanvas === "undefined" ?
                undefined :
                FlashCanvas
            )

        if (FC) {
        //code omitted
        } else {
            throw new Error("Canvas element does not support 2d context. jSignature cannot proceed.")
        }
    }
}

Which in simple words, check if canvas is supported, else check for the fallback FC (FlashCanvas) and if its not found throws the error

Resolution:

This is how you call the jSignature

<!-- you load jquery somewhere above here ... -->
<!--[if lt IE 9]>
<script type="text/javascript" src="path/to/flashcanvas.js"></script>
<![endif]-->
<script src="path/to/jSignature.min.js"></script>
<div id="signature"></div>
<script>
    $(document).ready(function() {
        $("#signature").jSignature();
    });
</script>

You can find the files here: https://github.com/willowsystems/jSignature Download the files and you will get the files from the lib folder. The required files

flashcanvas.js
flashcanvas.swf

Be sure to put both files in the same folder and set the path correctly in script src="path/to/flashcanvas.js"

Thank you for your help with this. I really appreciate it! – Childa75 Aug 12 '16 at 14:36 — Childa75, Aug 12 '16 at 14:36

jSignature working in ASP.NET Web Forms, but not in MVC4 - Why?

1 Answers1