[Solved] HTML5 Canvas Error: .sketch() is not a function

Hi xradius,

Refer below code.

HTML

<div>
    <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="100px"></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="GvImage" runat="server">
        <Columns>
            <asp:ImageField DataImageUrlField="FileName" HeaderText="File" ControlStyle-Height="50"
                ControlStyle-Width="50" />
        </Columns>
    </asp:GridView>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js"></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>

Code

C#

private string contring = ConfigurationManager.ConnectionStrings["Constring"].ToString();
protected void Page_Load(object sender, EventArgs e)
{

}

protected void OnUpload(Object sender, EventArgs e)
{
    byte[] bytes = Convert.FromBase64String(ImageVal.Value.Split(',')[1]);
    using (FileStream stream = new FileStream(Server.MapPath("~/Images/" + txtImageName.Text.Trim() + ".png"), FileMode.Create))
    {
        stream.Write(bytes, 0, bytes.Length);
        stream.Flush();
    }

    using (SqlConnection con = new SqlConnection(contring))
    {
        using (SqlCommand cmd = new SqlCommand("INSERT INTO [File] VALUES(@ImageName)", con))
        {
            cmd.Parameters.AddWithValue("@ImageName", "Images/" + txtImageName.Text.Trim() + ".png");
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();                   
                sda.Fill(dt);
            }
        }
    }
    txtImageName.Text = "";
    this.GetData();
}

private void GetData()
{
    using (SqlConnection con = new SqlConnection(contring))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT [FileName] FROM [File]", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                DataTable dt = new DataTable();
                sda.Fill(dt);
                GvImage.DataSource = dt;
                GvImage.DataBind();
            }
        }
    }
}

VB.Net

Private contring As String = ConfigurationManager.ConnectionStrings("Constring").ToString()
Protected Sub OnUpload(sender As [Object], e As EventArgs)
    Dim bytes As Byte() = Convert.FromBase64String(ImageVal.Value.Split(","c)(1))
    Using stream As New FileStream(Server.MapPath("~/Images/" + txtImageName.Text.Trim() + ".png"), FileMode.Create)
        stream.Write(bytes, 0, bytes.Length)
        stream.Flush()
    End Using

    Using con As New SqlConnection(contring)
        Using cmd As New SqlCommand("INSERT INTO [File] VALUES(@ImageName)", con)
            cmd.Parameters.AddWithValue("@ImageName", "Images/" + txtImageName.Text.Trim() + ".png")
            Using sda As New SqlDataAdapter(cmd)
                Dim dt As New DataTable()
                sda.Fill(dt)
            End Using
        End Using
    End Using
    txtImageName.Text = ""
    Me.GetData()
End Sub

Private Sub GetData()
    Using con As New SqlConnection(contring)
        Using cmd As New SqlCommand("SELECT [File] FROM [File]", con)
            Using sda As New SqlDataAdapter(cmd)
                Dim dt As New DataTable()
                sda.Fill(dt)
                GvImage.DataSource = dt
                GvImage.DataBind()
            End Using
        End Using
    End Using
End Sub

Screenshot