Save captured HTML5 Canvas signature Error: Index was outside the bounds of the array

Index was outside the bounds of the array.  The implemented codes as below. 

Please help. 

Thank you.

HTML:

<div class="tools">
    <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="300px" height="100pxs">
</canvas>
<br />
<br />
<asp:TextBox ID="txtImageName" Width="150px" Height="30px" Placeholder="Enter Your Image Name" runat="server" />
<asp:Button ID="btnSave" Text="Save Image" class="btnSuccess" OnClick="OnUpload" runat="server" />
<hr />
<asp:HiddenField ID="ImageVal" runat="server" />
<br />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#colors_sketch').sketch();
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            $('[Id*=ImageVal]').val(base64);
        });
    });
</script>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.IO;

namespace NewDigitalSignature
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                string constr = ConfigurationManager.ConnectionStrings["CitiStaff"].ConnectionString;
                using (SqlConnection conn = new SqlConnection(constr))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM tblFilespath", conn))
                    {
                        DataTable dt = new DataTable();
                        sda.Fill(dt);
                        gvImages.DataSource = dt;
                        gvImages.DataBind();
                    }
                }
            }
        }

        protected void OnUpload(object sender, EventArgs e)
        {
            string base64 = Request.Form[ImageVal.UniqueID].Split(',')[1];
            byte[] bytes = Convert.FromBase64String(base64);
            string filePath = string.Format("~/Uploads/{0}.png", txtImageName.Text);
            File.WriteAllBytes(Server.MapPath(filePath), bytes);
            string constr = ConfigurationManager.ConnectionStrings["CitiStaff"].ConnectionString;
            using (SqlConnection conn = new SqlConnection(constr))
            {
                string sql = "INSERT INTO tblFilespath VALUES(@Name, @Path)";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    cmd.Parameters.AddWithValue("@Name", txtImageName.Text);
                    cmd.Parameters.AddWithValue("@Path", filePath);
                    conn.Open();
                    cmd.ExecuteNonQuery();
                    conn.Close();
                }
            }
            Response.Redirect(Request.Url.AbsoluteUri);
        }
    }
}