When calling canvas.toDataURL, why is the part from rasterizeHTML.drawHTML black?

Question

I have a button, and when it is pressed, it calls common_save_project() . What is happening right now, the canvas is displayed correctly on the screen, but the image created by canvas.toDataURL is black where rasterizeHTML.drawHTML was called. I am using http://cburgmer.imtqy.com/rasterizeHTML.js/ .

Here is the relevant code:

 function common_save_project() { var image = common_screenshot(); $.ajax ( { type: "POST", processData: false, url: SITE_URL + "/system/xml/import/" + app_type + "/" + session_id + "/?prjid=" + project_id, data: "xml=" + common_order_xml + "&prodid=" + product_id + "&file=" + image.src } ).done(function( msg ) { console.log("Project saved. " + msg); }); } function common_screenshot() { var canvas = document.getElementById("save_image_canvas"); var ctx = canvas.getContext('2d'); if (typeof(moulding_canvas) === "undefined") { canvas.height = parseInt($("#matte_canvas").height()); canvas.width = parseInt($("#matte_canvas").width()); } else { canvas.height = parseInt($("#moulding_canvas").height()); canvas.width = parseInt($("#moulding_canvas").width()); } canvas.style.backgroundColor = "#FFFFFF"; var moulding_top = 0; var moulding_left = 0; if (document.getElementById("moulding_canvas")) { moulding_top = -1 * parseInt(document.getElementById("moulding_canvas").style.top); moulding_left = -1 * parseInt(document.getElementById("moulding_canvas").style.left); } var mattes_html = document.getElementById("mattes").innerHTML; mattes_html = mattes_html.replace(/<\/?script\b.*?>/g, ""); mattes_html = mattes_html.replace(/ on\w+=".*?"/g, ""); rasterizeHTML.drawHTML(mattes_html).then(function (renderResult) { ctx.drawImage(renderResult.image, moulding_left, moulding_top); }); ctx.drawImage(matte_canvas, moulding_left, moulding_top); if (typeof(moulding_canvas) !== "undefined") { ctx.drawImage(moulding_canvas, 0, 0); } var image = new Image(); image.src = canvas.toDataURL("image/jpeg"); return image; } 

Original:

After rasterizing HTML.drawHTML:

The end result (after canvas.toDataURL):

Answer 1

It will work fine if you declare the canvas again for saving.

Try the following:

 <script type="text/javascript"> var canvas = document.getElementById("canvas"); rasterizeHTML.drawHTML('<h1>hello Im here</h1>Some <span style="color: green; font-size: 20px;">HTML</span>', canvas); $('#saveImg').click(function(){ var canvas = document.getElementById("canvas"); var dataURL = canvas.toDataURL("image/png"); window.open(dataURL, "toDataURL() image", "width=600, height=200"); }); </script>