कैनवास पर SVG बनाने के लिए, आपको SVG इमेज का उपयोग करना होगा। सबसे पहले, <foreignObject> एलिमेंट का उपयोग करें जिसमें HTML हो। उसके बाद, SVG इमेज को कैनवास में बनाएं।
उदाहरण
HTML कैनवास पर SVG फ़ाइल बनाने के लिए निम्न कोड आज़माएं:
<!DOCTYPE html> <html> <head> <title>HTML कैनवास पर SVG फ़ाइल</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">' + 'सिम्पली ईज़ी ' + '<span style="color:blue;">' + 'लर्निंग</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>यह तकनीक SVG को इमेज में बदलकर कैनवास पर रेंडर करती है।
