Question

I’m attempting to turn the html5 canvas into a slide annotator. My goal is to upload an Image of a slide, allow the user to draw on it, and then save it.

Whats working: I successfully have slides being uploaded as background images and allowing the user to draw on them. I also have the save function working.

Whats wrong: Once the image is save, the drawing the user made stays but the background image doesn’t become part of the saved image.

Is there a way to save the canvas to an image and keep the slide background in it? Perhaps its not supposed to be a background image?

Here is some of my code:

The Canvas + button:

<div id="main">
<canvas id="drop1" class="drop" style="  background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;">
</canvas>
</div>

<input type="button" id="savepngbtn" value="Save Slide">

Saving the Canvas:

document.getElementById("savepngbtn").onclick = function() {
        saveCanvas(oCanvas, "PNG");
    }

function saveCanvas(pCanvas, strType) {
        var bRes = false;
        if (strType == "PNG")
            bRes = Canvas2Image.saveAsPNG(oCanvas);
        if (!bRes) {
            alert("Sorry, this browser is not capable of saving " + strType + " files!");
            return false;
        }
    }

Answer 1

you will need to make the ‘background-image’ part of the canvas if you would like to save them as a single image.

you can try something like:

var ctx = yourcanvas.getContext('2d');
var img = new Image();
img.src = 'http://yourimage.png';
img.onload = function() {
    ctx.drawImage(img, 0, 0)
}

then allow the user to add the annotations and save.