Question

I have a background image for a canvas, and added a few basic elements to the canvas. Now I want to save the canvas (in .png), with the background image of the canvas style.

Tried:

var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");

But this doesn’t seem to save the background image of the canvas. Is there a way out?

Answer 1

To save an image location, I believe your looking for:

window.location = canvas.canvas.toDataURL('image/png');

The first canvas call is your variable the second is the canvas object.
You should probably rename your variable to something unique.

To set an image in canvas and make that the background requires some more work:

var myCanvas = document.querySelector('myCanvas'),     
    img = document.createElement('img'),    
    ctx = myCanvas.getContext ? myCanvas.getContext('2d') : null;

    myCanvas.width = window.innerWidth;
    myCanvas.height = window.innerHeight;
    img.onload = function () {  
        ctx.drawImage(img, 0, 0, myCanvas.width, myCanvas.height);
    };
img.src = 'image.png';

updated to redraw the image.