html2canvas Uncaught (in promise) undefined

Question

I have a html tag canvas.

I can draw on it successfully, and it looks really good, as i wanted to

Answer 1

html2canvas is used for converting html code into a canvas view. If I am understanding correctly, you just want to get an image from the canvas so html2canvas is not needed. Simply just use Canvas2Image on it's own.

Example (blue is the image, red is the canvas):

// Example canvas with circle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();


var image = Canvas2Image.convertToPNG(c); // Returns HTMLImageElement 

$("#canvasImg").attr('src', image.src); // Set the src of our output image to the src of the HTMLImageElement

<!-- Output -->
<img id="canvasImg" src="" style="border:2px solid blue;">

<!-- Input -->
<canvas id="myCanvas" width="200" height="100" style="border:2px solid red;"></canvas>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script>

Answer 2

Tested Chrome, Firefox ok, IE 11 needs adding 2 extra js library to support promise.

function takeSnapShot() {
	html2canvas(document.querySelector("#capture")).then(function(canvas9) {
		var theimage9 = canvas9.toDataURL("image/png");
		document.querySelector("#theimage9").src = theimage9; 
	});
}

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js"></script> 
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>
<input type="button" value="Capture" onclick="takeSnapShot()"/>
<img id="theimage9" border="0" />