How to add image as background image together with canvas content into one image using toDataURL()?

Question

Here I have an image as canvas background image:

<canvas id="colors_sketch" width="320" height="568" 
    style="background:url('./image/ufo/UFO2.png')" ></canvas>

I can sketch on this canvas, but when I use follow code to POST as base64 format to server, it only posted the canvas content which I draw. But what I want is post the UFO2.png as background together with what I draw as base64 to server.

var pic = document.getElementById("colors_sketch");
$.post("function/storage.php",{ picdata:pic.toDataURL() },function(result){
    window.location.href= 'piclist.php';
});

How can I achieve that?

Answer 1

Your HTML

<canvas id="colors_sketch" width="320" height="568"></canvas>
<button id="foo">Save</button>

Then Draw the image on the canvas

var canvas = document.getElementById("colors_sketch");
var context = canvas.getContext('2d');
var source = "./image/ufo/UFO2.png";

var imageObj = new Image();
imageObj.onload = function() {
   context.drawImage(this, 0, 0);
   // Your Draw Code
   context.strokeStyle = "blue";
   context.strokeRect(5, 5, 50, 50);
   context.lineWidth = 5;
   context.strokeRect(135, 5, 50, 50);
};

imageObj.crossOrigin = "Anonymous";  // CORS
imageObj.src = source; // Set The Image URL

Add an event listener so when you click the save button (in this example) it will open the image in a new window/tab

document.getElementById('foo').addEventListener('click', function () {
    window.open(canvas.toDataURL("image/png"));
}); 

Basically if you want the toDataURL to include the background image you should draw the image as part of the canvas

I made a jsbin showing this ... jsbin

Lastly, after seeing how this works, send up the base-64 resulting from canvas.toDataURL("image/png") and you are good to go