Saving HTML5 Canvas toDataURL returns blank image using JavaScript and jQuery

I am uploading an image and converting the canvas to base64. I am passing the base64 data to server using Ajax.

The above code is not working completely. It generates image but send a Black Image to Server. How I resolve that issue?

<canvas id="myCanvas" width="200" height="200"></canvas>
<button onclick="javascript:drawShapes();return false;">Draw Picture</button>
<input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />

<script type="text/Javascript" language="Javascript">
        function loadImages(sources, callback) {
            var images = {};
            var loadedImages = 0;
            var numImages = 0;
            // get num of sources
            for (var src in sources) {
                numImages++;
            }
            for (var src in sources) {
                images[src] = new Image();
                images[src].onload = function () {
                    if (++loadedImages >= numImages) {
                        callback(images);
                    }
                };
                images[src].src = sources[src];
            }
        }

        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        function drawShapes() {
            var sources = {
                darthVader: 'http://freevectorsite.com/wp-content/uploads/2013/09/Creative-stock-vector-background.jpg',
                yoda: 'https://upload.wikimedia.org/wikipedia/commons/e/e9/Imgur_logo.svg'
            };

            loadImages(sources, function (images) {
                context.drawImage(images.darthVader, 0, 0);
                context.drawImage(images.yoda, 50, 50, 100, 104);
            });

           // var dataURL = canvas.toDataURL("image/png");
        }

</script>

<script type="text/javascript">
    $(function () {
        $("#btnSave").click(function () {
            var Pic = canvas.toDataURL("image/png");
            $.ajax({
                type: 'POST',
                url: '111.aspx/UploadImage',
                data: '{ "imageData" : "' + Pic + '" }',
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    alert('Image saved successfully !');
                }
            });
        });
    });

</script>

    [WebMethod()]
    public static void UploadImage(string imageData)
    {
        string path = @"D:\";
        string fileNameWitPath = path + "myimage.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();
            }
        }
    }