I have a canvas element that I'm setting the background on dynamically via code. Then I'm using the Sketch library (.js/) to draw on the canvas. - This all works.

However, whenever I try to convert the canvas using canvas.toDataURL("image/png") it's able to save the canvas drawing, however isn't saving the background. - I understand this is working as designed.

Is there a way to merge the two? I was toying around with the idea that I could set the image src to the background src after I'm done drawing and try to export that, however I'm not certain. Does anyone have any experience with this?

I have a canvas element that I'm setting the background on dynamically via code. Then I'm using the Sketch library (http://intridea.github.io/sketch.js/) to draw on the canvas. - This all works.

However, whenever I try to convert the canvas using canvas.toDataURL("image/png") it's able to save the canvas drawing, however isn't saving the background. - I understand this is working as designed.

Is there a way to merge the two? I was toying around with the idea that I could set the image src to the background src after I'm done drawing and try to export that, however I'm not certain. Does anyone have any experience with this?

• javascript
• css
• html5-canvas

Share Improve this question Follow asked Apr 10, 2014 at 13:03 Shawn ChristopherShawn Christopher 5911 gold badge33 silver badges1212 bronze badges 2

• How do you set the background? Maybe you should draw the background in the canvas before the rest if the drawing – vtortola Commented Apr 10, 2014 at 13:08
• I'm setting it via the background url attribute in jQuery – Shawn Christopher Commented Apr 10, 2014 at 13:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Yes, You are correct. I fetch the background image along with canvas image and download.

 ctx.width = 2503;
    ctx.height = 250;
    ctx.globalCompositeOperation="destination-over";
    var background = new Image();
    background.src = "http://localhost/xxxxx/xxxxx/xxxxx/xxxxx/ecg_back.png";   
    ctx.drawImage(background, 0, 0);
    // create pattern
    var ptrn = ctx.createPattern(background, 'repeat'); // Create a pattern with this image, and set it to "repeat".
    ctx.fillStyle = ptrn;
    ctx.fillRect(0, 0, ctx.width, ctx.height);

As you've discovered, the canvas and its background are maintained separately and toDataURL will not also capture the background.

You can bine the background with the sketch using canvas positing.

The 'destination-over' positing mode will let you drawImage your background behind the sketches

context.globalCompositeOperation="destination-over";

context.drawImage(backgroundImage,0,0);

Now the background pixels have been drawn behind you sketch and both will be captured with toDataURL.

How are you adding the background to the canvas? Are you setting it in css as a background image? Or are you adding the image directly to the canvas? I think you'll need to do the latter, as per the example here.