Childa75 Childa75 - 3 months ago 35
jQuery Question

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

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>

Answer

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

  1. flashcanvas.js
  2. flashcanvas.swf

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

Comments