Save captured screenshot after editing it

Question

I want to implement a functionality in my app wherein the user can take snapshot of the current screen and can annotate it (modify/scribble/etc) and after that, can send it in an email. My app uses phonegap for ios as well as android support. But mainly it consist of javascript/jquery.

So far I am able to achieve:

1. Saving current html to canvas (with the help of html2canvas library)
2. Enable user to interact with that canvas using freehand tool provided by sketch.js
3. Add text notes to user defined location anywhere on canvas
4. Open a new email popup using phonegap's email Composer Plugin

In order to provide interactivity feel to user, I implemented layers of canvas :

1: First layer will be showing actual snapshot captured through html2canvas. To show my snapshot on this canvas (capturedCanvas), I am setting the background-image of the canvas to image obtained through the library. code is as follows:

 $('.myClass').html2canvas({

                onrendered: function( canvas ) {

                    var capturedCanvas = document.getElementById('capturedImageView');
                    capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')';

                }
        });

2 and 3: The layers above it will toggle depending on whether the user selected freehand tool or text tool.

Everything works fine but when the user is finished interacting with the seperate canvases, I need to bring the 3 canvases into one image so that it can be attached to email. I am able to connect layers 2 and 3 using context.drawImage but somehow my actual snapshot that I got from html2canvas does not accompany my final image.

My final snapshot looks like this :

Please provide insight on this issue.

Answer 1

The reason that html2canvas snapshot doesn't appear is due to this:

capturedCanvas.style.backgroundImage = 'url('+canvas.toDataURL();+')';

When you set background like this you will only affect the canvas as a normal element, not the content of the canvas itself. This won't be registered as part of the pixels on it.

What you need to do is to drawImage() the result from html2canvas as well onto the final canvas (for example):

finalCanvasContext.drawImage(htmlCanvas, 0, 0);
finalCanvasContext.drawImage(layer1canvas, 0, 0);
finalCanvasContext.drawImage(layer2canvas, 0, 0);

or:

$('.myClass').html2canvas({

    onrendered: function( canvas ) {

        var capturedCanvas = document.getElementById('capturedImageView');
        var ctx = capturedCanvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0);

        //.. continue to allow draw etc.
    }
});

(I don't know your other code as you're not showing it so please adjust as needed).