HTML5 캔버스에 SVG 파일을 그리는 방법은 무엇입니까?

캔버스에 SVG를 그리려면 SVG 이미지를 사용해야 합니다. 먼저 HTML이 포함된 요소를 사용합니다. 그런 다음 SVG 이미지를 캔버스에 그려야 합니다.

예시

다음 코드를 시도하여 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>

출력

HTML5 캔버스에 SVG 파일을 그리는 방법은 무엇입니까?