jsbin.gegoy.html

$${x}^{2}$$
<canvas width="200" height="200"></canvas>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG.js"></script>

jsbin.gegoy.js

var canvas = document.getElementsByTagName("canvas")[0];
var ctx = canvas.getContext("2d");

MathJax.Hub.Register.StartupHook("End",function(){
	var svg = document.querySelector('.MathJax_SVG svg');
	svg.setAttribute("xmlns","http://www.w3.org/2000/svg")
	svg.insertBefore(document.querySelector("#MathJax_SVG_glyphs"),svg.firstChild);
	
	var svgStrings = new XMLSerializer().serializeToString(svg);
	var img = new Image();
	var svg = new Blob([svgStrings], {type: "image/svg+xml;charset=utf-8"});
	var url = URL.createObjectURL(svg);
	img.onload = function() {
		ctx.drawImage(img, 0, 0,200,200);
		var png = canvas.toDataURL("image/png");
		console.log(png)
		//URL.revokeObjectURL(url);
	};
	img.src = url;
});