Click here to Skip to main content
15,664,182 members
Please Sign up or sign in to vote.
5.00/5 (2 votes)
I have written this code as illustrated in
<script src="" type="text/javascript"></script>
<script type="text/Javascript" language="Javascript">
        function drawShapes() {
            var canvas = document.getElementById("myCanvas");
            var context = canvas.getContext("2d");
            context.fillStyle = "Blue";
            context.fillRect(0, 0, 200, 200);
            context.lineWidth = "4";
            context.strokeStyle = "Green";
            context.fillStyle = "Yellow";
            context.arc(150, 100, 50, 20, Math.PI * 2, false);

<body onload="drawShapes()">

        <canvas id="myCanvas" width="200" height="200"></canvas>
        <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />

        <script type="text/javascript">
            // Send the canvas image to the server.
            $(function() {
                $("#btnSave").click(function() {
                    var image = document.getElementById("myCanvas").toDataURL("image/png");
                    image = image.replace('data:image/png;base64,', '');
                        type: 'POST',
                        url: 'CanvasSave.aspx/UploadImage',
                        data: '{ "imageData" : "' + image + '" }',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function(msg) {
                            alert('Image saved successfully !');


using System;
using System.IO;
using System.Web.Script.Services;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page
    static string path = @"F:\Dinesh\";

    public static void UploadImage(string imageData)
        string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
        using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            using (BinaryWriter bw = new BinaryWriter(fs))
                byte[] data = Convert.FromBase64String(imageData);


Now, drawShapes() is working and I can see the graphics in canvas when view in browser. But when I click the button to save that canvas image in folder nothing is happen. How can I save that canvas image in my folder?
Updated 10-Apr-18 23:21pm
I.explore.code 19-Oct-12 6:21am    
can you put a break point on UploadImage() method and see if the breakpoint hits? if it does, try debugging it and see whats going on in that method.
Dinesh Ambaliya 19-Oct-12 6:38am    
Oh my god! I putted break point on UploadImage() method and breakpoint is not hitted. After that I looked code carefully and the problem was 'CanvasSave.aspx/UploadImage()' I renamed my Default.aspx page to CanvasSave.aspx and I sovled. Thank you for your comment I got idea from it.
I.explore.code 19-Oct-12 7:12am    
Perfect! you are welcome mate! Happens to all of us, sometimes the solution is too simple to be obvious right away!
Uriel Tinashe Patsanza 19-Jun-14 8:21am    
did you find a solution im stuck on saving to server

1 solution

The javascript ajax function is uploading the image data to CanvasSave.aspx
and the c# page reading the data is default.aspx
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900