HTML5 Canvas-এ SVG ফাইল কীভাবে আঁকবেন?

HTML5 Canvas-এ SVG আঁকার পদ্ধতি

Canvas-এ SVG আঁকতে হলে SVG ইমেজ ব্যবহার করতে হবে। প্রথমে <foreignObject> এলিমেন্ট ব্যবহার করতে হবে যাতে HTML কন্টেন্ট থাকে। তারপর SVG ইমেজটি Canvas-এ আঁকতে হবে।

উদাহরণ

নিচের কোডটি ব্যবহার করে HTML Canvas-এ 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>

আউটপুট

মূল ধাপসমূহ:

1. SVG ডেটা একটি স্ট্রিং হিসেবে তৈরি করুন
2. Blob অবজেক্ট তৈরি করুন type: 'image/svg+xml' সহ
3. createObjectURL দিয়ে URL তৈরি করুন
4. Image অবজেক্টে লোড করুন এবং onload-এ drawImage কল করুন
5. শেষে revokeObjectURL দিয়ে মেমরি মুক্ত করুন