html5
vezi si border
open potrace
stroke="red" stroke-width="40" stroke-linecap"round"
final
<!DOCTYPE html>
<html>
<body>
<img hidden id="scream" src="test_svg.svg" >
<canvas id="myCanvas" width="1000" height="1000" style="border:1px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
};
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Casella di testo
document.getElementById('drawingArea').toDataURL('image/png');
Casella di testo
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
Casella di testo
<!DOCTYPE html>
<html>
<body>
<img id="scream" src="test_svg.svg" alt="The Scream" width="300" height="300" style="border:1px solid red;">
<canvas id="myCanvas" width="500" height="500" style="border:1px solid black;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
document.getElementById("scream").onload = function() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var img = document.getElementById("scream");
ctx.drawImage(img, 0, 0);
//var dataURL = canvas.toDataURL();
//document.getElementById('scream').src = dataURL;
};
</script>
<p><strong>Note:</strong> The canvas tag is not supported in Internet
Explorer 8 and earlier versions.</p>
</body>
</html>
Casella di testo
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.strokeStyle = "red";
ctx.lineCap="round";
ctx.lineWidth="40";
ctx.stroke();
</script>