moritzmhmk/svg_to_png.html

## svg_to_png.html
<html>
<head>

</head>
<body>
	<!--<svg viewBox="0 0 1000 1000">
	    <path
	      id="path"
	      style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
	      d="M 500,500 A 500,500 0 1 1 0,500 500,500 0 1 1 1000,500"
	    />
	</svg>-->
	<script type="text/javascript">
		function polarToCartesian(center, radius, angleInDegrees) {
		  var angleInRadians = angleInDegrees * Math.PI / 180.0;
		  var x = center.x + radius * Math.cos(angleInRadians);
		  var y = center.y + radius * Math.sin(angleInRadians);
		  return {'x': x, 'y': y};
		}
		function arc(svg, center, radius, start_angle, end_angle, color, closed) {
			var path = document.createElementNS(svg.namespaceURI,'path')
			var start = polarToCartesian(center, radius, start_angle)
		    var end = polarToCartesian(center, radius, end_angle)
		    var large_arc_flag = Math.abs(start_angle-end_angle+360*2)%360 <= 180 ? 1 : 0
		    path.setAttribute('d', 'M '+start.x+' '+start.y+' '+
		    					   'A '+radius+' '+radius+' 0 '+large_arc_flag+' 1 '+end.x+' '+end.y+(closed?' z':''))

			path.setAttribute("fill", "none")
			path.setAttribute("stroke", color) //bg: #657E84;  warn: #FF6652;
			path.setAttribute("stroke-width", "10")
			path.setAttribute("stroke-linecap", "round")
	    	svg.appendChild(path)
		}
		//document.getElementById("path").setAttribute("d", "M 400,500 A 500,500 0 1 1 0,500 500,500 0 1 1 1000,500");

		//var svg = document.querySelector( "svg" );
		var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
		svg.setAttribute("viewBox", "0 0 1000 1000")

	    //arc(svg, {'x': 500, 'y': 500}, 490, 0, 359.99, "#657E84", true)
	    arc(svg, {'x': 500, 'y': 500}, 490, 0-90, 10-90, "#FF6652", false)

	    //rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
		var svgData = new XMLSerializer().serializeToString( svg )
		console.log(svgData)


		var canvas = document.createElement( "canvas" )
		canvas.width = 1000
		canvas.height = 1000
		var ctx = canvas.getContext( "2d" )

		var img = document.createElement( "img" )
		img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) )

		img.onload = function() {
		    ctx.drawImage( img, 0, 0 )
		    var png = canvas.toDataURL( "image/png" )
		    console.log( png )
		    document.write('<img src="'+png+'" style="height:100%;">')
		};
	</script>
</body>
</html>
	<html>
	<head>

	</head>
	<body>
	<!--<svg viewBox="0 0 1000 1000">
	<path
	id="path"
	style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none"
	d="M 500,500 A 500,500 0 1 1 0,500 500,500 0 1 1 1000,500"
	/>
	</svg>-->
	<script type="text/javascript">
	function polarToCartesian(center, radius, angleInDegrees) {
	var angleInRadians = angleInDegrees * Math.PI / 180.0;
	var x = center.x + radius * Math.cos(angleInRadians);
	var y = center.y + radius * Math.sin(angleInRadians);
	return {'x': x, 'y': y};
	}
	function arc(svg, center, radius, start_angle, end_angle, color, closed) {
	var path = document.createElementNS(svg.namespaceURI,'path')
	var start = polarToCartesian(center, radius, start_angle)
	var end = polarToCartesian(center, radius, end_angle)
	var large_arc_flag = Math.abs(start_angle-end_angle+360*2)%360 <= 180 ? 1 : 0
	path.setAttribute('d', 'M '+start.x+' '+start.y+' '+
	'A '+radius+' '+radius+' 0 '+large_arc_flag+' 1 '+end.x+' '+end.y+(closed?' z':''))

	path.setAttribute("fill", "none")
	path.setAttribute("stroke", color) //bg: #657E84; warn: #FF6652;
	path.setAttribute("stroke-width", "10")
	path.setAttribute("stroke-linecap", "round")
	svg.appendChild(path)
	}
	//document.getElementById("path").setAttribute("d", "M 400,500 A 500,500 0 1 1 0,500 500,500 0 1 1 1000,500");

	//var svg = document.querySelector( "svg" );
	var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg")
	svg.setAttribute("viewBox", "0 0 1000 1000")

	//arc(svg, {'x': 500, 'y': 500}, 490, 0, 359.99, "#657E84", true)
	arc(svg, {'x': 500, 'y': 500}, 490, 0-90, 10-90, "#FF6652", false)

	//rx, ry, x-axis-rotation, large-arc-flag, sweep-flag, x, y
	var svgData = new XMLSerializer().serializeToString( svg )
	console.log(svgData)


	var canvas = document.createElement( "canvas" )
	canvas.width = 1000
	canvas.height = 1000
	var ctx = canvas.getContext( "2d" )

	var img = document.createElement( "img" )
	img.setAttribute( "src", "data:image/svg+xml;base64," + btoa( svgData ) )

	img.onload = function() {
	ctx.drawImage( img, 0, 0 )
	var png = canvas.toDataURL( "image/png" )
	console.log( png )
	document.write('<img src="'+png+'" style="height:100%;">')
	};
	</script>
	</body>
	</html>