how to save multiple canvas into one image

Question

I want to save multiple canvas into one image using asp.net. I tried with with two canvases, but it is not saving.

Canvas:

    <div style="position:relative; width:456px; padding:0px; margin:0px;">
    <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;   top: -220px; z-index: 0;"></canvas>
    <canvas id="layer2" width="456" height="480" style="position: absolute;left: 0;   top:-220px; z-index: 1;"></canvas>    
   </div>


 <input type="button" id="btnSave" style="width:150px ; text-align:center;height:30px" name="btnSave" value="Save as Image!" />

Jquery:

<script type="text/javascript">
     // Send the canvas image to the server.
     $(function () {
         $("#btnSave").click(function () {

             can1 = document.getElementById("broadcanvas");
             ctx1 = can1.getContext("2d");
             var coll = document.getElementById("layer2");
             ctx1.drawImage(coll, 0, 0);
             var image = can1.toDataURL("image/png");   

             alert(image);
             image = image.replace('data:image/png;base64,', '');
             $.ajax({
                 type: 'POST',
                 url: 'index.aspx/UploadImage',
                 data: '{ "imageData" : "' + image + '" }',
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (msg) {
                     alert('Image saved successfully !');
                 }
             });
         });
     });
</script>

index.aspx.cs:

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

[ScriptService]
public partial class index : System.Web.UI.Page
{
    static string path = @"E:\Green\images\\";
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    [WebMethod()]
    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);
                bw.Write(data);
                bw.Close();
             }
         }
     }
}

Answer 1

For the proper working of this code you have to do the below things

1. Correct the spelling of the canvas id used in the javascript code.
2. Change the position of the button. Currently button is under the canvas. So can't click on the button.
3. Create directories Green and Images in E drive. It should be there E:\Green\Images

The working code is.

Javascript

<script type="text/javascript">
        // Send the canvas image to the server.
        $(function () {
            $("#btnSave").click(function () {
                can1 = document.getElementById("boardcanvas");
                ctx1 = can1.getContext("2d");
                var coll = document.getElementById("layer2");
                ctx1.drawImage(coll, 0, 0);
                var image = can1.toDataURL("image/png");

                alert(image);
                image = image.replace('data:image/png;base64,', '');
                $.ajax({
                    type: 'POST',
                    url: 'Default.aspx/UploadImage',
                    data: '{ "imageData" : "' + image + '" }',
                    contentType: 'application/json; charset=utf-8',
                    dataType: 'json',
                    success: function (msg) {
                        alert('Image saved successfully !');
                    }
                });
            });
        });
    </script>

Html code

<div style="position: relative; width: 456px; padding: 0px; margin: 0px;">
        <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 0;">
        </canvas>
        <canvas id="layer2" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 1;">
        </canvas>
    </div>
    <input type="button" id="btnSave" style="position: absolute; left: 460px; width: 150px;
        text-align: center; height: 30px; z-index: 2;" name="btnSave" value="Save as Image!" />

Asp.Net side code is OK. Please Try with the above code. Sure it will work (Don't forget to create the directory).