HTML-কে 2D ক্যানভাসে রেন্ডার করুন

Natalia Markoborodova

HTML-in-Canvas API আপনাকে সরাসরি 2D ক্যানভাস প্রসঙ্গে ইন্টার‍্যাক্টিভ, অ্যাক্সেসযোগ্য DOM সাবট্রি রেন্ডার করতে দেয়। API ও তার সুবিধা সম্পর্কে আরও জানতে HTML-in-Canvas ওভারভিউ পড়ুন।

এই নির্দেশিকা থেকে জানতে পারবেন যে কীভাবে HTML-কে 2D ক্যানভাসে রেন্ডার করতে হয়। 2D ক্যানভাসে HTML রেন্ডার করার জন্য নিম্নলিখিত ধাপগুলি প্রয়োজন:

  1. আপনার ক্যানভাস প্রস্তুত করুন। ব্রাউজারকে জানানোর জন্য সঠিক অ্যাট্রিবিউট সেট করুন যাতে এটি ক্যানভাসে HTML রেন্ডার করতে পারে। এই সেট-আপ 2D, WebGL ও WebGPU কন্টেক্সট জুড়ে একই রকম। কীভাবে আপনার ক্যানভাস সেট-আপ করবেন এবং কীভাবে স্বতন্ত্রভাবে আঁকার জন্য HTML এলিমেন্ট ঘোষণা করবেন তা জানুন।
  2. ক্যানভাসে এলিমেন্টের ছবি আঁকুন।
  3. [ঐচ্ছিক] DOM ও পিক্সেল সিঙ্ক্রোনাইজ করুন।

2D ক্যানভাসে HTML এলিমেন্ট আঁকুন

ক্যানভাস রেডি হয়ে গেলে এবং এলিমেন্ট drawable হিসেবে চিহ্নিত করা হলে, drawElementImage() পদ্ধতি ব্যবহার করে 2D কন্টেক্সটে সেগুলি রেন্ডার করুন।

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const childElement1 = document.getElementById("childElement1");
const childElement2 = document.getElementById("childElement2");

canvas.onpaint = () => {
  ctx.reset();
  // 1. Draw the primary element at coordinate (20, 20)
  ctx.drawElementImage(childElement1, 20, 20);
  // 2. Draw the secondary nested button at a custom offset
  ctx.drawElementImage(childElement2, 40, 90);
}

drawElementImage() ৩-আর্গুমেন্ট, ৫-আর্গুমেন্ট, ৭-আর্গুমেন্ট ও ৯-আর্গুমেন্ট ফর্মের সাথে কাজ করে এবং ঐচ্ছিক options প্যারামিটার গ্রহণ করে:

// 1. Basic position: (element, dx, dy, options?)
ctx.drawElementImage(targetElement, 100, 150);

// 2. Scaled / resized: (element, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 100, 150, 180, 60);

// 3. Cropped, default size: (element, sx, sy, swidth, sheight, dx, dy, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150);

// 4. Cropped and resized: (element, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight, options?)
ctx.drawElementImage(targetElement, 0, 0, 90, 30, 100, 150, 180, 60);
ওভারলোড ফর্ম প্যারামিটারগুলি লেআউট এফেক্ট
ডিফল্ট সাইজ (element, dx, dy) ডিফল্ট সাইজে সম্পূর্ণ এলিমেন্ট, যার উপরে বাঁদিকের কোণ (dx, dy)-এ আছে।
কাস্টম ডেস্টিনেশন বক্স (element, dx, dy, dwidth, dheight) ক্যানভাসে dw × dh ভিউপোর্টে সম্পূর্ণ এলিমেন্ট ইমেজ স্কেল করে।
ক্রপ করা, ডিফল্ট সাইজ (element, sx, sy, swidth, sheight, dx, dy) শুধুমাত্র (sx, sy) থেকে শুরু হওয়া swidth × sheight এলাকা, যা ওই এলাকার ডিফল্ট সাইজে আঁকা হয়েছে (ডিফল্ট-সাইজ ফর্মের মতো একই স্কেল)।
সোর্স স্লাইস থেকে গন্তব্য (element, sx, sy, swidth, sheight, dx, dy, dwidth, dheight) (sx, sy) থেকে শুরু করে swidth × sheight ডাইমেনশন সহ সোর্স এলিমেন্ট ক্রপ করে, তারপর এটি গন্তব্যে (dx, dy, dwidth, dheight) ম্যাপ করে।

DOM ও পিক্সেল সিঙ্ক্রোনাইজ করুন

DOM লেআউট এবং CSS স্টাইলিং রিঅ্যাক্টিভ হলেও <canvas> রেন্ডারিং অপরিহার্য, তাই রেন্ডার করা ক্যানভাস পিক্সেল, ইন্টার‍্যাক্টিভ হিট-টেস্ট অঞ্চল এবং অ্যাক্সেসিবিলিটি ট্রি সিঙ্ক করে রাখার জন্য ব্রাউজারের একটি মেকানিজম প্রয়োজন। DOM ও পিক্সেল কীভাবে সিঙ্ক করতে হয় তা শেখার আগে, DOM এলিমেন্ট আপডেট হলে এবং আবার আঁকার প্রয়োজন হলে ট্রিগার হওয়া paint ইভেন্ট সম্পর্কে বুঝে নিন।

2D ক্যানভাস প্রসঙ্গে, ব্রাউজার অটোমেটিক এলিমেন্টের লেআউট কোঅর্ডিনেট, অ্যাক্সেসিবিলিটি বাউন্ড এবং পয়েন্টার হিট-টেস্টিং ড্র করা ক্যানভাস কোঅর্ডিনেটের সাথে সিঙ্ক করে।

এলিমেন্ট জিওমেট্রি ম্যানুয়ালি আপডেট করুন

উন্নত পরিস্থিতিতে, আপনি অটোমেটিক জিওমেট্রি সিঙ্ক করার বিকল্প থেকে অপ্ট-আউট করতে এবং স্পেশিয়াল ট্রান্সফর্ম ম্যানুয়ালি কন্ট্রোল করতে পারবেন। এলিমেন্টের বর্তমান হিট-টেস্ট স্থানাঙ্ক ব্রাউজার যাতে অটোমেটিক ওভাররাইড করতে না পারে, তার জন্য { preserveElementGeometry: true } থেকে drawElementImage() পাস করুন:

// 1. Draw the element without altering its existing hit-test bounds
ctx.drawElementImage(targetElement, elementX, 200, { preserveElementGeometry: true });

// 2. Construct a custom transform matrix as needed,
// assuming scaleX/scaleY = canvas grid pixels per CSS pixel,
// from your resize observer (see "Units and sizing").
const currentTransform = new DOMMatrix();
currentTransform.a = 1.5;          // scale X
currentTransform.e = x / scaleX;   // translate X: grid px → CSS px
currentTransform.f = y / scaleY;   // translate Y: grid px → CSS px

// 3. Explicitly apply the custom transform
canvas.updateElementGeometry(targetElement, { canvasTransform: currentTransform });
2D-তে, drawElementImage() অটোমেটিক এই জিওমেট্রি আপডেট করে। { preserveElementGeometry: true } সেট করা থাকলে কীভাবে জ্যামিতি সিঙ্ক থেকে বেরিয়ে যায় তা এই ডেমো দেখায়।

পরবর্তী ধাপ