एसवीजी को कैनवास पर खींचने के लिए, आपको एसवीजी छवि का उपयोग करना होगा। सबसे पहले,
उदाहरण
HTML कैनवास पर SVG फ़ाइल बनाने के लिए आप निम्न कोड आज़मा सकते हैं
<!DOCTYPE html>
<html>
<head>
<title>SVG file on HTML Canvas </title>
</head>
<body>
<canvas id="myCanvas" style="border:2px solid green;" width="300" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var data = '<svg xmlns="https://www.w3.org/2000/svg" width="300"
height="200">' +
'<foreignObject width="100%" height="100%">' +
'<div xmlns="https://www.w3.org/1999/xhtml" style="font-size:50px">' +
'Simply Easy ' +
'<span style="color:blue;">' +
'Learning</span>' +
'</div>' +
'</foreignObject>' +
'</svg>';
var DOMURL = window.URL || window.webkitURL || window;
var img1 = new Image();
var svg = new Blob([data], {type: 'image/svg+xml'});
var url = DOMURL.createObjectURL(svg);
img1.onload = function() {
ctx.drawImage(img1, 25, 70);
DOMURL.revokeObjectURL(url);
}
img1.src = url;
</script>
</body>
</html> आउटपुट
