HTML5 Canvas-এ save() এবং restore() মেথড কী?

Canvas স্টেট ম্যানেজমেন্ট: save() ও restore()

HTML5 Canvas دوটি গুরুত্বপূর্ণ মেথড প্রদান করে ক্যানভাসের স্টেট সংরক্ষণ ও পুনরুদ্ধারের জন্য: save() এবং restore()। ক্যানভাসের সেটিংস (ট্রান্সফরমেশন, স্টাইল, ক্লিপিং রিজন ইত্যাদি) একটি স্টকে (stack) সংরক্ষিত হয়।

ব্যবহারের উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <style>
    #test { width: 300px; height: 300px; margin: 20px auto; border: 1px solid #ccc; }
  </style>
  <script>
    function drawShape() {
      const canvas = document.getElementById('mycanvas');
      if (canvas.getContext) {
        const ctx = canvas.getContext('2d');
        
        // ডিফল্ট সেটিংসে আয়ত আঁকুন
        ctx.fillRect(0, 0, 150, 150);
        
        // ডিফল্ট স্টেট সংরক্ষণ
        ctx.save();
        
        // সেটিংস পরিবর্তন
        ctx.fillStyle = '#66FFFF';
        ctx.fillRect(15, 15, 120, 120);
        
        // বর্তমান স্টেট সংরক্ষণ
        ctx.save();
        
        // নতুন সেটিংস
        ctx.fillStyle = '#993333';
        ctx.globalAlpha = 0.5;
        ctx.fillRect(30, 30, 90, 90);
        
        // পূর্বের স্টেট ফেরত (লাল আয়তের স্টেট)
        ctx.restore();
        ctx.fillRect(45, 45, 60, 60);
        
        // মূল স্টেট ফেরত (নীল আয়তের স্টেট)
        ctx.restore();
        ctx.fillRect(40, 40, 90, 90);
      } else {
        alert('Canvas সাপোর্ট করে না। আধুনিক ব্রাউজার ব্যবহার করুন।');
      }
    }
  </script>
</head>
<body id="test" onload="drawShape();">
  <canvas id="mycanvas" width="300" height="300"></canvas>
</body>
</html>

কেন save()/restore() ব্যবহার করবেন?

• কমপ্লেক্স ড্রইং-এ স্টেট ম্যানেজমেন্ট সহজ করে।
• নেস্টেড ট্রান্সফরমেশন (translate, rotate, scale) হ্যান্ডল করতে সাহায্য করে।
• কোড পঠনীয় এবং রক্ষণাবেক্ষণযোগ্য করে তোলে।
• পারফরম্যান্সে স 익숙া নাও হতে পারে, কিন্তু কোড ক্লিয়ার রাখতে অপরিহার্য।

নোট: প্রতিটি save()-এর জন্য একটি restore() থাকা উচিত, অন্যথায় স্টক ওভারফ্লো হতে পারে।