I would think this is a common problem, but I can't seem to find a simple solution to it. I have a canvas (I am actually using sketch.js but I don't think that matters) with a background image, for example a Storm Trooper:

[![enter image description here](https://i.stack.imgur.com/kPlQs.jpg)](https://i.stack.imgur.com/kPlQs.jpg)

I then thru Sketch.js allow the user to write scribble on it:
[![enter image description here](https://i.stack.imgur.com/a2ffi.jpg)](https://i.stack.imgur.com/a2ffi.jpg)

When getting the image from the canvas I only get it canvas image:

[![enter image description here](https://i.stack.imgur.com/RXVK1.jpg)](https://i.stack.imgur.com/RXVK1.jpg)

What I really want it both (just like it looks on the screen, 2nd capture above).

I have tried merging the background image back in without success. Ultimately this result is pushed to S3 - so I am not looking for a way to push it into another HTML element, I would prefer a grabbing of the canvas and background together. But if not possible, I would imagine some sort of merge must take place.

HTML:

```
        <div id="annotationmodal" class="modal">
        <div class="annotation-container" id="annotation_{{id}}">
            <div class="tools" style="margin-bottom:10px;">
            </div>
            <div class="center">
                <canvas id="tools_sketch_inlinephoto" width="{{width}}" height="{{height}}" style="background: url(@Url.Content("~")my/stuff/amazon/{{value}}/redirect) no-repeat center center;"></canvas>
            </div>
            <div class="center">
                <input type="button" class="btn btn-solid-grey btn-sm" onclick="device.annotationCancel();" value="Cancel" style="margin-right: 15px;" />
                <input type="button" class="btn btn-solid-green btn-sm" onclick="device.annotationSave(this, '{{id}}');" value="Save" />
            </div>
        </div>

```

Javascript:

```
   annotationSave: function (element, id) {
        var fileExtension = "jpg";
        var canvas = document.getElementById("tools_sketch_inlinephoto");
        var data = canvas.toDataURL();
        var key = device.uploadDataUri(fileExtension, "image/" + fileExtension, data);
        $("#annotationmodal").detach();
        if (settings.focusedField) {
            settings.focusedField.focus();
        }
    }

```

Is there an easy way to do this? Note that the background image is being pulled from S3 also...