Sending canvas data to server

Question

I have a canvas in my web page. Here the user draws an image. Now when the user clicks the submit button I want the browser to send the canvas data along with other fields.
Is it possible to send the canvas data. If yes how?

Answer 1

canvas.toDataURL("image/png");

will return your image data as a data: URI
You can set it to a hidden field and submit it with your form.
Or you can send it via AJAX request.

You can create another an image with the URI, and redraw the image

var imageURI = ...
// TODO: get the URI
var context = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
  ctx.drawImage(img,0,0);
}
img.src = imageURI;