এইচটিএমএল-ইন-ক্যানভাস এপিআই অরিজিন ট্রায়াল চালু করা হচ্ছে

টমাস ন্যাটেস্টাড
Thomas Nattestad
X
নাটালিয়া মার্কোবোরোডোভা

বছরের পর বছর ধরে, ওয়েবে জটিল ও অত্যন্ত ইন্টারেক্টিভ ভিজ্যুয়াল অ্যাপ্লিকেশন তৈরি করার সময় ওয়েব ডেভেলপারদের একটি কঠিন আর্কিটেকচারাল সিদ্ধান্ত নিতে হয়েছে: আপনি কি এর সমৃদ্ধ সিম্যান্টিক বৈশিষ্ট্যের জন্য DOM-এর উপর নির্ভর করবেন, নাকি লো-লেভেল গ্রাফিক্স পারফরম্যান্সের জন্য সরাসরি <canvas> এলিমেন্টে রেন্ডার করবেন?

নতুন পরীক্ষামূলক HTML-in-Canvas API-এর মাধ্যমে—যা এখন অরিজিন ট্রায়ালে উপলব্ধ—আপনাকে কোনো একটি বেছে নিতে হবে না। এই API আপনাকে UI-কে ইন্টারেক্টেবল, অ্যাক্সেসিবল এবং আপনার পছন্দের ব্রাউজার ফিচারগুলোর সাথে সংযুক্ত রেখে সরাসরি একটি 2D ক্যানভাস বা একটি WebGL/WebGPU টেক্সচারে DOM কন্টেন্ট আঁকতে দেয়। HTML-কে লো-লেভেল গ্রাফিক্স প্রসেসিংয়ের সাথে একত্রিত করে, আপনি এমন সব অভিজ্ঞতা তৈরি করতে পারবেন যা আগে অসম্ভব ছিল।

DOM বনাম ক্যানভাস

এই নতুন API-এর ক্ষমতা বোঝার জন্য DOM এবং Canvas উভয়ের আপেক্ষিক শক্তিগুলো খতিয়ে দেখা সহায়ক হয়।

DOM হলো ওয়েব UI-এর মূল ভিত্তি। এটি অর্থপূর্ণ বিষয়বস্তু ব্যবহার করে সমৃদ্ধ ইন্টারফেস তৈরির জন্য স্বয়ংক্রিয়ভাবে টেক্সট লেআউটের সমাধান প্রদান করে। এর ফলে ব্যবহারকারীরা ওয়েব পেজ জুড়ে নির্বিঘ্নে সাধারণ কাজগুলো করতে পারেন—এমন সব কাজ যা আমরা প্রায়শই স্বাভাবিক বলে ধরে নিই, যেমন কপি করার জন্য টেক্সট হাইলাইট করা, বা কোনো ছবি সেভ করার জন্য রাইট-ক্লিক করা। DOM ব্রাউজারের কিছু অপরিহার্য ফিচারের সাথেও সমন্বিত থাকে: অ্যাক্সেসিবিলিটি টুলস, অনুবাদ, ফাইন্ড-ইন-পেজ, রিডার মোড, এক্সটেনশন, ডার্ক মোড, ব্রাউজার জুম এবং অটোফিল।

অন্যদিকে, ক্যানভাস (এবং WebGL / WebGPU ) অত্যন্ত উন্নত ২ডি এবং ৩ডি গ্রাফিক্সের জন্য পিক্সেলের একটি গ্রিডকে চালনা করতে নিম্ন-স্তরের অ্যাক্সেসের সুযোগ দেয়। গেম এবং জটিল ওয়েব অ্যাপ (যেমন গুগল ডক্স বা ফিগমা)-এর জন্য এই উচ্চ-ক্ষমতাসম্পন্ন, নিম্ন-স্তরের অ্যাক্সেস প্রয়োজন হয়। যেহেতু ক্যানভাস মূলত পিক্সেলের একটি গ্রিড, তাই রেসপন্সিভ টেক্সটের মতো ফিচারগুলো সমর্থন করার জন্য আগে জটিল কাস্টম UI লজিকের প্রয়োজন হতো, যা আপনার বান্ডেল সাইজ ব্যাপকভাবে বাড়িয়ে দিত। সবচেয়ে গুরুত্বপূর্ণ বিষয় হলো, যখন UI একটি স্ট্যাটিক ক্যানভাস পিক্সেল গ্রিডের মধ্যে আবদ্ধ থাকে, তখন DOM-এর সাথে সমন্বিত ব্রাউজারের সমস্ত শক্তিশালী ফিচার সম্পূর্ণরূপে অকার্যকর হয়ে যায়।

ক্যানভাসে DOM নিয়ে আসার সুবিধাগুলো

এইচটিএমএল-ইন-ক্যানভাস এপিআই হলো সেই সেতু যা আপনাকে উভয় জগতের সেরা সুবিধা দেয়। <canvas> এলিমেন্টের ভিতরে এইচটিএমএল রেখে এবং এর ট্রান্সফর্ম সিঙ্ক্রোনাইজ করার মাধ্যমে, আপনি নিশ্চিত করতে পারেন যে কন্টেন্টটি সম্পূর্ণ ইন্টারেক্টিভ থাকবে এবং সমস্ত ব্রাউজার ইন্টিগ্রেশন স্বয়ংক্রিয়ভাবে কাজ করবে।

একটি <canvas> এলিমেন্টের ভিতরে DOM-কে আপনার UI পরিচালনা করতে দিলে আপনি যা পাবেন তা এখানে দেওয়া হলো:

  • টেক্সট লেআউট এবং ফরম্যাটিং: সরলীকৃত টেক্সট লেআউট এবং ফরম্যাটিং, যার মধ্যে CSS স্টাইল প্রয়োগ করা মাল্টিলাইন বা দ্বিমুখী টেক্সট অন্তর্ভুক্ত।
  • ফর্ম কন্ট্রোল: ব্যাপক কাস্টমাইজেশন বিকল্পসহ অভিব্যক্তিপূর্ণ এবং সহজে ব্যবহারযোগ্য ফর্ম কন্ট্রোল।
  • টেক্সট সিলেকশন, কপি/পেস্ট এবং রাইট-ক্লিক: ব্যবহারকারীরা আপনার 3D সিন-এর ভেতরে টেক্সট হাইলাইট করতে পারেন, অথবা স্বাভাবিকভাবেই রাইট-ক্লিক করে কনটেক্সট মেনু ব্যবহার করতে পারেন।
  • টেক্সট সিলেকশন, কপি/পেস্ট এবং রাইট-ক্লিক: ব্যবহারকারীরা আপনার 3D সিন-এর ভেতরে টেক্সট হাইলাইট করতে পারেন, অথবা স্বাভাবিকভাবেই রাইট-ক্লিক করে কনটেক্সট মেনু ব্যবহার করতে পারেন।
  • অ্যাক্সেসিবিলিটি: ক্যানভাসের ভিতরে রেন্ডার করা কন্টেন্ট অ্যাক্সেসিবিলিটি ট্রি-তে উন্মুক্ত থাকে। অ্যাক্সেসিবিলিটি সিস্টেমগুলো সাধারণ HTML-এর মতোই UI পার্স করতে পারে এবং স্ক্রিন রিডারের মতো সিস্টেমের কাছে তা প্রকাশ করতে পারে।
  • পৃষ্ঠার মধ্যে অনুসন্ধান: ব্যবহারকারীরা টেক্সট খোঁজার জন্য 'পৃষ্ঠার মধ্যে অনুসন্ধান' ( Ctrl / Cmd + F ) ব্যবহার করতে পারেন, এবং ব্রাউজারটি আপনার WebGL টেক্সচারের মধ্যে সরাসরি সেটিকে হাইলাইট করবে।
  • পৃষ্ঠার মধ্যে অনুসন্ধান: ব্যবহারকারীরা টেক্সট খোঁজার জন্য 'পৃষ্ঠার মধ্যে অনুসন্ধান' ( Ctrl / Cmd + F ) ব্যবহার করতে পারেন, এবং ব্রাউজারটি আপনার WebGL টেক্সচারের মধ্যে সরাসরি সেটিকে হাইলাইট করবে।
  • ইনডেক্সযোগ্যতা এবং এআই এজেন্টের সাথে ইন্টারফেসযোগ্য: ওয়েব ক্রলার এবং এআই এজেন্টরা আপনার ২ডি এবং ৩ডি সিনে রেন্ডার করা টেক্সট নির্বিঘ্নে ইনডেক্স ও পড়তে পারে।
  • এক্সটেনশন ইন্টিগ্রেশন: ব্রাউজার এক্সটেনশনগুলো স্বাভাবিকভাবেই কাজ করে। উদাহরণস্বরূপ, একটি টেক্সট-রিপ্লেসমেন্ট এক্সটেনশন আপনার 3D মেশগুলোতে রেন্ডার করা টেক্সট স্বয়ংক্রিয়ভাবে আপডেট করবে।
  • ডেভটুলস ইন্টিগ্রেশন: আপনি সরাসরি ক্রোম ডেভটুলস-এ আপনার ক্যানভাসের কন্টেন্ট, এমনকি WebGL/WebGPU UI এলিমেন্টগুলোও ইন্সপেক্ট করতে পারবেন। ইন্সপেক্টরে একটি CSS স্টাইল পরিবর্তন করুন, এবং দেখুন তা সাথে সাথে 3D টেক্সচারে আপডেট হয়ে যাচ্ছে!

উচ্চ-স্তরের ব্যবহারের ক্ষেত্র

এই এপিআইটি বিভিন্ন ক্ষেত্রে অসাধারণ সম্ভাবনা উন্মোচন করে:

  • বৃহৎ ক্যানভাস-ভিত্তিক অ্যাপ্লিকেশন: গুগল ডক্স, মিরো বা ফিগমার মতো ভারী ওয়েব অ্যাপগুলো এখন তাদের ক্যানভাস-চালিত ওয়ার্কস্পেসে জটিল অ্যাপ্লিকেশন UI উপাদানগুলোকে নেটিভভাবে রেন্ডার করতে পারে, যা অ্যাক্সেসিবিলিটি উন্নত করে এবং বান্ডেলের ওজন কমায়।
  • 3D সিন ও গেম: মার্কেটিং সাইট, ইমারসিভ WebXR অভিজ্ঞতা এবং ওয়েব গেমগুলোতে এখন 3D সিনের মধ্যে সম্পূর্ণ ইন্টারঅ্যাক্টেবল ওয়েব UI স্থাপন করা যায়—যেমন একটি 3D বই যা আসল DOM টেক্সট ব্যবহার করে, অথবা একটি ইন-গেম টার্মিনাল যা স্বাভাবিকভাবেই কপি ও পেস্ট সমর্থন করে।

এপিআই কীভাবে ব্যবহার করবেন

এপিআই ব্যবহার করার প্রক্রিয়াটি তিনটি ধাপে সম্পন্ন হয়: আপনার ক্যানভাস সেট আপ করা, ক্যানভাসে রেন্ডার করা, এবং সিএসএস ট্রান্সফর্ম আপডেট করা, যাতে ব্রাউজার জানতে পারে স্ক্রিনে এলিমেন্টটি বাস্তবে কোথায় অবস্থিত।

পূর্বশর্ত

এইচটিএমএল-ইন-ক্যানভাস এপিআইটি ক্রোম ১৪৮ থেকে ১৫০ সংস্করণে অরিজিন ট্রায়াল পর্যায়ে রয়েছে। আপনার সাইটে এটি পরীক্ষা করার জন্য, chrome://flags/#canvas-draw-element ফ্ল্যাগটি সক্রিয় করে ক্রোম ক্যানারি ১৪৯ বা তার পরবর্তী সংস্করণ ব্যবহার করুন। অন্যান্য ব্যবহারকারীদের জন্য এপিআইটি সক্রিয় করতে, অরিজিন ট্রায়ালের জন্য নিবন্ধন করুন।

ধাপ ১: প্রাথমিক ক্যানভাস সেটআপ

প্রথমে, আপনার <canvas> ট্যাগে layoutsubtree অ্যাট্রিবিউটটি যোগ করুন। এটি ব্রাউজারকে ক্যানভাসের ভিতরে থাকা কন্টেন্ট সম্পর্কে অবহিত করে, সেটিকে ক্যানভাসের ভিতরে প্রদর্শনের জন্য প্রস্তুত করে এবং অ্যাক্সেসিবিলিটি ট্রি-তে উন্মুক্ত করে দেয়।

<canvas id="canvas" style="width: 200px; height: 200px;" layoutsubtree>
  <div id="form_element">
    <label for="name">Name:</label> <input id="name" type="text">
  </div>
</canvas>

ক্যানভাস গ্রিডের আকার নির্ধারণ করুন

রেন্ডার করা বিষয়বস্তুর ঝাপসাভাব এড়াতে, ক্যানভাস গ্রিডের আকার ডিভাইসের স্কেল ফ্যাক্টরের সাথে মিলিয়ে নিন।

const observer = new ResizeObserver(([entry]) => {
  const dpc = entry.devicePixelContentBoxSize;
  canvas.width = dpc ? dpc[0].inlineSize : Math.round(entry.contentRect.width * window.devicePixelRatio);
  canvas.height = dpc ? dpc[0].blockSize : Math.round(entry.contentRect.height * window.devicePixelRatio);
});

const supportsDevicePixelContentBox =
  typeof ResizeObserverEntry !== 'undefined' &&
  'devicePixelContentBoxSize' in ResizeObserverEntry.prototype;
const options = supportsDevicePixelContentBox ? { box: 'device-pixel-content-box' } : {};
observer.observe(canvas, options);

ধাপ ২: রেন্ডারিং

একটি 2D প্রেক্ষাপটের জন্য, ` drawElementImage মেথডটি ব্যবহার করুন। এটি paint ইভেন্টের ভিতরে করুন, যা এলিমেন্টটি পুনরায় আঁকার সময় ট্রিগার হয়—উদাহরণস্বরূপ, টেক্সট হাইলাইটিং বা ব্যবহারকারীর ইনপুটের সময়। রিটার্ন ভ্যালু দিয়ে এলিমেন্টের CSS `transform` আপডেট করা অত্যন্ত গুরুত্বপূর্ণ, যাতে ইন্টারঅ্যাক্টিভিটি কাজ করতে থাকে।

const ctx = document.getElementById('canvas').getContext('2d');
const form_element = document.getElementById('form_element');
const canvas = document.getElementById('canvas');

canvas.onpaint = () => {
  ctx.reset();

  // Draw the form element at x:0, y:0
  let transform = ctx.drawElementImage(form_element, 0, 0);

  // Use the transform returned later on...
};

WebGL দিয়ে রেন্ডার করুন

WebGL-এর জন্য texElementImage2D ব্যবহার করতে হয়। এটি texImage2D এর মতোই কাজ করে, কিন্তু DOM এলিমেন্টকে সোর্স হিসেবে গ্রহণ করে।

canvas.onpaint = () => {
  if (gl.texElementImage2D) {
    gl.texElementImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, form_element);
  }
};

WebGPU দিয়ে রেন্ডার করুন

WebGPU ডিভাইস কিউ-তে copyElementImageToTexture মেথডটি ব্যবহার করে, যা copyExternalImageToTexture এর অনুরূপ:

canvas.onpaint = () => {
  root.device.queue.copyElementImageToTexture(
    valueElement,
    { texture: targetTexture }
  );
};

ধাপ ৩: CSS ট্রান্সফর্ম আপডেট করুন।

এখন যেহেতু আপনি ক্যানভাসে এলিমেন্টটি রেন্ডার করেছেন, সেটির অবস্থান সম্পর্কে ব্রাউজারকে আপডেট করতে হবে। এটি ক্যানভাস এবং DOM-এর লেআউটের মধ্যে স্থানিক সামঞ্জস্য নিশ্চিত করে। এটি গুরুত্বপূর্ণ, যাতে ব্রাউজার ইভেন্ট জোনকে—যেমন ব্যবহারকারী ঠিক কোথায় ক্লিক বা হোভার করছেন—এলিমেন্টটি যেখানে রেন্ডার করা হয়েছে তার সাথে সঠিকভাবে মেলাতে পারে।

2D প্রেক্ষাপটের ক্ষেত্রে, রেন্ডারিং কল থেকে প্রাপ্ত ট্রান্সফর্মটি .style.transform property প্রয়োগ করুন:

const ctx = document.getElementById('canvas').getContext('2d');
const form_element = document.getElementById('form_element');
const canvas = document.getElementById('canvas');

canvas.onpaint = () => {
  ctx.reset();
  // Draw the form element at x:0, y:0
  let transform = ctx.drawElementImage(form_element, 0, 0);

  // Sync the DOM location with the drawn location
  form_element.style.transform = transform.toString();
};

WebGL বা WebGPU-এর ক্ষেত্রে, কোনো এলিমেন্টের অন-স্ক্রিন অবস্থান নির্ভর করে শেডার কোড দ্বারা আউটপুট টেক্সচারটি কীভাবে ব্যবহৃত হচ্ছে তার উপর, এবং এটি ক্যানভাস রেন্ডারিং কনটেক্সট থেকে অনুমান করা যায় না। তবে, যদি আপনার শেডার প্রোগ্রাম টেক্সচারটি আঁকার জন্য একটি সাধারণ মডেল ভিউ প্রজেকশন ব্যবহার করে, তাহলে আপনি নতুন সুবিধাজনক ফাংশন element.getElementTransform() ব্যবহার করে এমন একটি ট্রান্সফর্ম গণনা করতে পারেন যা drawElementImage() থেকে প্রাপ্ত রিটার্ন ভ্যালুর মতোই ব্যবহার করা যায়। এই কাজটি সহজ করার জন্য, আপনাকে নিম্নলিখিত পদক্ষেপগুলো অনুসরণ করতে হবে:

  • WebGL MVP ম্যাট্রিক্সকে DOM ম্যাট্রিক্সে রূপান্তর করুন।
  • এইচটিএমএল এলিমেন্টটিকে নর্মালাইজ করুন। এইচটিএমএল এলিমেন্টগুলোর সাইজ পিক্সেলে পরিমাপ করা হয় (যেমন, ২০০ পিক্সেল চওড়া)। কিন্তু WebGL সাধারণত অবজেক্টগুলোকে 'ইউনিট স্কোয়ার' হিসেবে বিবেচনা করে, যার পরিসর ০ থেকে ১ পর্যন্ত। আপনি যদি নর্মালাইজ না করেন, তাহলে আপনার ২০০ পিক্সেলের বাটনটি ২০০ গুণ বড় দেখাবে।
  • ক্যানভাস ভিউপোর্টে ম্যাপ করুন। এই ধাপটি হলো "রিস্কেলিং" পর্যায়: এটি ইউনিট-স্পেসের হিসাবকে প্রসারিত করে স্ক্রিনে থাকা আপনার <canvas> এলিমেন্টের প্রকৃত পিক্সেল ডাইমেনশনের সাথে মিলিয়ে দেয়। এটি Y-অক্ষকেও উল্টে দেয়, কারণ WebGL-এ ওপরের দিক ধনাত্মক, কিন্তু CSS-এ নিচের দিক ধনাত্মক।
  • চূড়ান্ত ট্রান্সফর্মটি গণনা করুন। ম্যাট্রিক্সগুলো ক্রমানুসারে গুণ করুন: Viewport * MVP * Normalization. এগুলোকে একটি চূড়ান্ত ট্রান্সফর্মে একত্রিত করলে একটি "ম্যাপ" তৈরি হয়, যা ব্রাউজারকে স্পষ্টভাবে বলে দেয় যে 3D ড্রয়িংয়ের সাথে সারিবদ্ধ হওয়ার জন্য HTML এলিমেন্ট লেয়ারটি ঠিক কোথায় বসবে।
  • HTML এলিমেন্টে ট্রান্সফর্মটি প্রয়োগ করুন। এটি HTML এলিমেন্ট লেয়ারটিকে তার রেন্ডার করা পিক্সেলের ঠিক উপরে নিয়ে আসে। এর ফলে, যখন কোনো ব্যবহারকারী একটি বোতামে ক্লিক করেন বা টেক্সট নির্বাচন করেন, তখন তিনি আসল HTML এলিমেন্টটিতেই ক্লিক করেন। 
if (canvas.getElementTransform) {
  // 1. Convert WebGL MVP Matrix to DOM Matrix
  const mvpDOM = new DOMMatrix(Array.from(htmlElementMVP));

  // 2. Normalize the HTML element (pixels -> 1x1 unit square)
  const width = targetHTMLElement.offsetWidth;
  const height = targetHTMLElement.offsetHeight;

  const cssToUnitSpace = new DOMMatrix()
    .scale(1 / width, -1 / height, 1) // Shrink to unit size and flip Y
    .translate(-width / 2, -height / 2); // Center the element

  // 3. Map to the canvas viewport
  const clipToCanvasViewport = new DOMMatrix()
    .translate(canvas.width / 2, canvas.height / 2) // Move origin to center
    .scale(canvas.width / 2, -canvas.height / 2, 1); // Stretch to canvas dimensions

  // 4. Multiply: (Clip -> Pixels) * (MVP) * (pixels -> unit square)
  const screenSpaceTransform = clipToCanvasViewport
      .multiply(mvpDOM)
      .multiply(cssToUnitSpace);

  // 5. Apply to the transform
  const computedTransform = canvas.getElementTransform(targetHTMLElement, screenSpaceTransform);
  if (computedTransform) {
    targetHTMLElement.style.transform = computedTransform.toString();
  }
}

লাইব্রেরি এবং ফ্রেমওয়ার্ক সমর্থন

কিছু জনপ্রিয় লাইব্রেরি ইতিমধ্যেই ক্যানভাসে এইচটিএমএল (HTML) ফিচারের জন্য সমর্থন যুক্ত করেছে।

থ্রি.জেএস

ম্যাট্রিক্স ম্যানুয়ালি আপডেট করা ক্লান্তিকর হতে পারে, যে কারণে ফ্রেমওয়ার্কগুলো ইতিমধ্যেই এই পথে হাঁটছে। Three.js নতুন THREE.HTMLTexture ব্যবহার করে পরীক্ষামূলক সমর্থন নিয়ে এসেছে।

const material = new THREE.MeshBasicMaterial();
material.map = new THREE.HTMLTexture(uiElement); // Pass the DOM element

const geometry = new THREE.BoxGeometry(1, 1, 1);
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

প্লেক্যানভাস

PlayCanvas তাদের টেক্সচার এপিআই ব্যবহার করে ক্যানভাসের মধ্যে এইচটিএমএল-কেও সমর্থন করে:

// Wait for the 'paint' event to set the source
canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
}, { once: true });
canvas.requestPaint();

// Keep up to date
canvas.addEventListener('paint', onPaintUpload);

const material = new pc.StandardMaterial();
material.diffuseMap = htmlTexture;
material.update();

ডেমো

ডেমোগুলো ব্যবহার করার আগে, আপনার পরিবেশটি সঠিকভাবে কনফিগার করা আছে কিনা তা নিশ্চিত করুন।

এপিআই ব্যবহারের জন্য রেফারেন্স হিসেবে বেশ কিছু ডেমো রয়েছে। আমরা ইতিমধ্যেই কমিউনিটির কাছ থেকে সৃজনশীল সমাধান দেখতে পাচ্ছি, যার মধ্যে রয়েছে স্থানান্তরযোগ্য থ্রিডি বই থেকে শুরু করে গ্লাস শেডারের মাধ্যমে প্রতিসরিত হওয়া ইউআই এলিমেন্ট পর্যন্ত।

  • থ্রিডি বই : একটি WebGL-রেন্ডার করা থ্রিডি বই, যার পৃষ্ঠাগুলো HTML লেআউট ব্যবহার করে। ব্যবহারকারীরা CSS দিয়ে ফন্ট পরিবর্তন করতে পারেন। এটি DOM-ভিত্তিক হওয়ায়, এর অন্তর্নির্মিত অনুবাদ তাৎক্ষণিকভাবে কাজ করে এবং AI এজেন্টরা কম জটিলতায় টেক্সট বের করে নিতে পারে।
  • ইন্টারেক্টিভ ৩ডি ইউআই : একটি ওয়েবজিপিইউ জেলি স্লাইডার যা একটি অন্তর্নিহিত ৩ডি মডেলের উপর ভিত্তি করে আলোকে প্রতিসরণ করে এবং একই সাথে স্ট্যান্ডার্ড এইচটিএমএল <input type="range"> স্টেপ অ্যাট্রিবিউটেও সাড়া দেয়।
  • অ্যানিমেটেড টেক্সচার : একটি ডাইনামিক ৩ডি বিলবোর্ড যা কোনো কাস্টম অ্যানিমেশন লুপের প্রয়োজন ছাড়াই সরাসরি DOM ব্যবহার করে একটি WebGL টেক্সচারে একটি অ্যানিমেটেড SVG পেন্সিল রেন্ডার করে।
  • রিফ্র্যাক্টিভ ওভারলে : একটি ইন্টারেক্টিভ টাইপোগ্রাফি লেয়ার যা একটি চলমান 3D কার্সার দ্বারা বিকৃত হয়, কিন্তু ফাইন্ড-ইন-পেজ ব্যবহার করে এটিকে সম্পূর্ণরূপে নির্বাচন ও অনুসন্ধান করা যায়।

কমিউনিটি দ্বারা তৈরি ডেমোগুলোর সংগ্রহটি দেখুন। আপনি যদি আপনার HTML-in-Canvas ডেমোটি এই সংগ্রহে অন্তর্ভুক্ত করতে চান, তবে এটি যোগ করার জন্য একটি পুল রিকোয়েস্ট তৈরি করুন ।

সীমাবদ্ধতা

শক্তিশালী হওয়া সত্ত্বেও, এপিআইটির কয়েকটি সচেতন সীমাবদ্ধতা রয়েছে:

  • ক্রস-অরিজিন কন্টেন্ট: নিরাপত্তা এবং গোপনীয়তার কারণে , এপিআইটি ক্রস-অরিজিন আইফ্রেম কন্টেন্টের সাথে কাজ করে না।
  • মেইন থ্রেড স্ক্রলিং: ক্যানভাসের ভেতরের HTML জাভাস্ক্রিপ্ট দিয়ে আঁকা হয়, যার মানে হলো স্ক্রলিং এবং অ্যানিমেশন জাভাস্ক্রিপ্ট থেকে স্বাধীনভাবে আপডেট হতে পারে না, যেমনটা ক্যানভাসের বাইরে হতে পারে। ডেভেলপারদের ক্যানভাসের ভেতরে স্ক্রলিং কন্টেন্ট রাখা এবং পুরো ক্যানভাসকে স্ক্রল করানোর পারফরম্যান্স বৈশিষ্ট্যগুলো সতর্কতার সাথে বিবেচনা করা উচিত।

প্রতিক্রিয়া

আপনি যদি HTML-in-Canvas API নিয়ে পরীক্ষা-নিরীক্ষা করে থাকেন, তবে আমরা আপনার মতামত জানতে আগ্রহী! API-এর ডিজাইনকে আরও উন্নত করতে আমাদের সাহায্য করার জন্য, আপনি অরিজিন ট্রায়ালের জন্য সাইন আপ করে আপনার সাইটে ফিচারটি চালু করতে পারেন, যা বর্তমানে পরীক্ষামূলক পর্যায়ে রয়েছে। এছাড়া, যেকোনো মতামত জানাতে আপনি একটি ইস্যুও ফাইল করতে পারেন।

সম্পদ