ক্যানভাস ইলিমেন্ট

"ক্যানভাস ইলিমেন্ট" বলতে মূলত এমন একটি টুলকে বুঝায় যার সাহায্যে ওয়েবপেজে গ্রাফিক্সের কাজ করা যায়। HTML5 এ, ওয়েব ডেভেলপারদের জন্য এটি একটি অত্যন্ত শক্তিশালী এবং বহুমুখী টুল হিসেবে বিবেচিত। এই ইলিমেন্টটি একটি নির্দিষ্ট পরিমাপের গ্রাফিক্স এলাকা তৈরি করে যেখানে জাভাস্ক্রিপ্টের মাধ্যমে বিভিন্ন ধরনের চিত্র আঁকা যায়। ক্যানভাস ইলিমেন্ট মূলত 2D গ্রাফিক্স আঁকার জন্য ব্যবহৃত হলেও, ওয়েবজিএল এর সাহায্যে 3D গ্রাফিক্স তৈরিতেও সক্ষম। ওয়েবপেজে ডাইনামিক গ্রাফিক্স এবং এনিমেশন যোগ করার ক্ষেত্রে এটি অত্যন্ত কার্যকর একটি ইলিমেন্ট। ক্যানভাস ইলিমেন্ট ব্যবহার করে ওয়েব ডেভেলপাররা ইন্টারেক্টিভ গেম, ডায়াগ্রাম, ডেটা ভিজ্যুয়ালাইজেশন ও অন্যান্য ভিজ্যুয়াল কন্টেন্ট তৈরি করতে পারেন।^[১]

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

ইতিহাস

২০০৪ সালে অ্যাপল তাদের নিজস্ব ম্যাকওএস ওয়েবকিট কম্পোনেন্টে ব্যবহারের জন্য ক্যানভাস প্রথম চালু করে।^[২] যা ড্যাশবোর্ড উইজেট এবং সাফারি ব্রাউজারের মতো অ্যাপ্লিকেশন পরিচালনার জন্য ব্যবহৃত হয়। পরবর্তীতে, ২০০৫ সালে, এটি গেকো ব্রাউজারের ১.৮ সংস্করণে গৃহীত হয়,^[৩] এবং ২০০৬ সালে অপেরা ব্রাউজারে গৃহীত হয়,^[৪] এবং পরবর্তী প্রজন্মের ওয়েব প্রযুক্তির জন্য প্রস্তাবিত নতুন স্পেসিফিকেশনের উপর ওয়েব হাইপারটেক্সট অ্যাপ্লিকেশন টেকনোলজি ওয়ার্কিং গ্রুপ দ্বারা মানকভাবে গৃহীত হয়।^[৫]

প্রযুক্তিগত পর্যালোচনা

HTML5-এর ক্যানভাস ইলিমেন্ট ওয়েবপেজে ডাইনামিক গ্রাফিক্স রেন্ডার করার একটি কার্যকর উপায় প্রদান করে। এটি একটি আয়তাকার এলাকা তৈরি করে যেখানে JavaScript ব্যবহার করে বিভিন্ন 2D আকৃতি, টেক্সট, চিত্র এবং অ্যানিমেশন আঁকা সম্ভব। যদিও <canvas> ইলিমেন্টটি নিজে কোনো গ্রাফিক্স তৈরি করতে পারে না, এটি জাভাস্ক্রিপ্ট এপিআই ব্যবহার করে অঙ্কনের জন্য একটি প্ল্যাটফর্ম সরবরাহ করে।

সিনট্যাক্স ও অ্যাট্রিবিউটসমূহ ^[৬]

একটি সাধারণ ক্যানভাস ইলিমেন্ট HTML-এ নিম্নলিখিতভাবে সংজ্ঞায়িত করা হয়:

<canvas id="myCanvas" width="500" height="300"></canvas>

এই ইলিমেন্টে দুটি গুরুত্বপূর্ণ অ্যাট্রিবিউট রয়েছে:

width – ক্যানভাসের প্রস্থ (ডিফল্ট ৩০০px)।
height – ক্যানভাসের উচ্চতা (ডিফল্ট ১৫০px)।

যদি width এবং height অ্যাট্রিবিউট প্রদান না করা হয়, তবে ক্যানভাস ডিফল্ট আকার গ্রহণ করে, যা ড্রয়িং স্কেলিং সমস্যার কারণ হতে পারে।

ডিফল্ট আচরণ এবং ফোলব্যাক কনটেন্ট ^[৬]

যেহেতু ক্যানভাস ইলিমেন্ট কাজ করার জন্য JavaScript এর উপর নির্ভরশীল, তাই এমন কিছু ব্রাউজার বা ডিভাইস থাকতে পারে যেগুলি এটি সমর্থন করে না। এ ধরনের ক্ষেত্রে ফোলব্যাক কনটেন্ট ব্যবহার করা যেতে পারে:

<canvas id="myCanvas">
 আপনার ব্রাউজার ক্যানভাস ইলিমেন্ট সমর্থন করে না।
</canvas>

রেন্ডারিং কন্টেক্সট ^[৬]

ক্যানভাসে আঁকতে হলে রেন্ডারিং কন্টেক্সট সংগ্রহ করতে হয়, যা নির্ধারণ করে যে কীভাবে আঁকা হবে। সবচেয়ে বেশি ব্যবহৃত কন্টেক্সট হল 2D রেন্ডারিং কন্টেক্সট, যা বেসিক আকৃতি, রং, টেক্সট, এবং পিক্সেল ম্যানিপুলেশন করতে দেয়। এটি JavaScript-এ নিম্নলিখিত ভাবে ব্যবহার করা হয়:

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

এই "কনটেক্সট অবজেক্ট" ব্যবহার করে বিভিন্ন ড্রয়িং অপারেশন করা যায়।

2D অঙ্কন ফাংশনসমূহ ^[৭]

2D রেন্ডারিং কন্টেক্সট বিভিন্ন অঙ্কন ফাংশন প্রদান করে, যেমন:

আকৃতি আঁকা: fillRect(), strokeRect(), clearRect()
পথ তৈরি: beginPath(), moveTo(), lineTo(), arc()
স্টাইলিং: fillStyle, strokeStyle, lineWidth
টেক্সট: fillText(), strokeText()
চিত্র আঁকা: drawImage()
পিক্সেল ম্যানিপুলেশন: getImageData(), putImageData()

এই ফাংশনগুলির মাধ্যমে অ্যানিমেশন, ইন্টারঅ্যাকটিভ ভিজ্যুয়ালাইজেশন এবং গেম তৈরি করা সম্ভব হয়।

WebGL এবং WebGL2 সমর্থন^[৮]

HTML5 ক্যানভাস 3D গ্রাফিক্স সমর্থনের জন্য ওয়েবজিএল ও ওয়েবজিএল২ এপিআই ব্যবহার করে। ওয়েবজিএল ক্যানভাসকে 3D গ্রাফিক্স রেন্ডার করতে সক্ষম করে, যা আধুনিক গেম ডেভেলপমেন্ট এবং ভার্চুয়াল রিয়েলিটি অ্যাপ্লিকেশনে ব্যবহৃত হয়।

2D রেন্ডারিং API ফাংশনসমূহ

2D ক্যানভাস API বিভিন্ন ধরণের অঙ্কন ফাংশন প্রদান করে, যা জাভাস্ক্রিপ্ট এর মাধ্যমে গ্রাফিক্স তৈরি করতে সহায়তা করে।

১. আকৃতি আঁকা

ctx.fillStyle = "blue";  
ctx.fillRect(50, 50, 200, 100); // একটি নীল আয়তক্ষেত্র আঁকা

fillRect(x, y, width, height) – নির্দিষ্ট স্থান ও আকারের একটি পূর্ণ আয়তক্ষেত্র আঁকে।
strokeRect(x, y, width, height) – শুধু আউটলাইন সহ একটি আয়তক্ষেত্র আঁকে।

২. পথ তৈরি ও রেখা আঁকা

ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(200, 200);
ctx.stroke();

beginPath() – নতুন একটি আঁকার পথ শুরু করে।
moveTo(x, y) – অঙ্কন বিন্দু নির্ধারণ করে।
lineTo(x, y) – একটি রেখা আঁকে।

৩. টেক্সট রেন্ডারিং

ctx.font = "30px Arial";
ctx.fillText("Hello Canvas!", 100, 100);

fillText(text, x, y) – নির্দিষ্ট অবস্থানে টেক্সট রেন্ডার করে।
strokeText(text, x, y) – শুধু আউটলাইনসহ টেক্সট রেন্ডার করে।

৪. ছবি রেন্ডারিং

var img = new Image();
img.src = "image.png";

img.onload = function() {
    ctx.drawImage(img, 50, 50, 200, 150);
};

drawImage(image, x, y, width, height) – ক্যানভাসে চিত্র রেন্ডার করে।

3D রেন্ডারিং API (WebGL API এর ব্যবহার)

ওয়েবজিএল এপিআই ব্যবহার করে 3D গ্রাফিক্স ও গেম ডেভেলপমেন্ট করা সম্ভব। তবে এটি 2D API-এর তুলনায় বেশি জটিল এবং শেডার প্রোগ্রামিং ও জিপিইউ প্রসেসিং এর উপর নির্ভর করে। উদাহরণস্বরূপ, নিচের কোড ওয়েবজিএল রেন্ডারিং সক্রিয় করে:

১. WebGL ক্যানভাস সেটআপ করা

প্রথমে, একটি ওয়েবজিএল ক্যানভাস তৈরি করা হয় এবং জাভাস্ক্রিপ্ট এর মাধ্যমে এটি ইনিশিয়ালাইজ করা হয়।

<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
  // ক্যানভাস ও WebGL কন্টেক্সট সংগ্রহ
  var canvas = document.getElementById("glCanvas");
  var gl = canvas.getContext("webgl");

  if (!gl) {
    console.log("আপনার ব্রাউজার WebGL সমর্থন করে না!");
  } else {
    console.log("WebGL সফলভাবে লোড হয়েছে!");
    gl.clearColor(0.0, 0.0, 0.0, 1.0); // ব্যাকগ্রাউন্ড কালো সেট করা
    gl.clear(gl.COLOR_BUFFER_BIT);
  }
</script>

এখানে,

ক্যানভাস সংগ্রহ করা হচ্ছে।
WebGL কন্টেক্সট ইনিশিয়ালাইজ করা হচ্ছে।
স্ক্রিন কালো ব্যাকগ্রাউন্ড দিয়ে পরিষ্কার করা হচ্ছে।

২. একটি 3D ত্রিভুজ আঁকা

এই উদাহরণে আমরা একটি সাধারণ ত্রিভুজ আঁকব ওয়েবজিএল ভারটেক্স ও ফ্রাগমেন্ট শেডার ব্যবহার করে।

<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById("glCanvas");
  var gl = canvas.getContext("webgl");

  if (!gl) {
    console.log("WebGL পাওয়া যায়নি!");
  }

  // **ভেরটেক্স শেডার কোড (Vertex Shader)**
  var vertexShaderSource = `
    attribute vec4 position;
    void main() {
      gl_Position = position;
    }
  `;

  // **ফ্র্যাগমেন্ট শেডার কোড (Fragment Shader)**
  var fragmentShaderSource = `
    void main() {
      gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // লাল রং
    }
  `;

  // **শেডার কম্পাইল ফাংশন**
  function createShader(gl, type, source) {
    var shader = gl.createShader(type);
    gl.shaderSource(shader, source);
    gl.compileShader(shader);
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      console.error("শেডার কম্পাইল করতে ব্যর্থ:", gl.getShaderInfoLog(shader));
      gl.deleteShader(shader);
      return null;
    }
    return shader;
  }

  // **শেডার কম্পাইল করা**
  var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);

  // **শেডার প্রোগ্রাম তৈরি করা**
  var program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  gl.useProgram(program);

  // **ত্রিভুজের ভেরটেক্স ডাটা তৈরি করা**
  var vertices = new Float32Array([
    0.0,  0.5,  // উপরের বিন্দু
   -0.5, -0.5,  // নিচের বাঁ দিকের বিন্দু
    0.5, -0.5   // নিচের ডান দিকের বিন্দু
  ]);

  // **ভেরটেক্স বাফার তৈরি করা**
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  // **অ্যাট্রিবিউট পয়েন্টার সেট করা**
  var position = gl.getAttribLocation(program, "position");
  gl.enableVertexAttribArray(position);
  gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0);

  // **ত্রিভুজ আঁকা**
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT);
  gl.drawArrays(gl.TRIANGLES, 0, 3);
</script>

এখানে,

ওয়েবজিএল ভারটেক্স ও ফ্রাগমেন্ট শেডার তৈরি করা হয়েছে।
ত্রিভুজের জন্য ভেরটেক্স ডাটা সেটআপ করা হয়েছে।
ওয়েবজিএল বাফার তৈরি করা হয়েছে।
ত্রিভুজটি ওয়েবজিএল স্ক্রিনে আঁকা হয়েছে।

৩. WebGL ব্যবহার করে ঘূর্ণায়মান রঙিন ঘনক

এই উদাহরণেওয়েবজিএল এপিআই ব্যবহার করে একটি 3D ঘনক তৈরি এবং ঘোরানো হবে।

<canvas id="glCanvas" width="500" height="500"></canvas>
<script>
  var canvas = document.getElementById("glCanvas");
  var gl = canvas.getContext("webgl");

  if (!gl) {
    console.log("WebGL পাওয়া যায়নি!");
  }

  // ব্যাকগ্রাউন্ড কালার সেট করা
  gl.clearColor(0.2, 0.3, 0.4, 1.0);
  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

  function renderLoop() {
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    // এখানে ঘনক রেন্ডার করার কোড যুক্ত করা হবে
    requestAnimationFrame(renderLoop);
  }

  renderLoop();
</script>

এখানে,

স্ক্রিনের ব্যাকগ্রাউন্ড রঙ (নীলাভ) সেট করা হয়েছে।
requestAnimationFrame(renderLoop) ব্যবহার করে অ্যানিমেশন লুপ তৈরি করা হয়েছে।
প্রতিবার স্ক্রিন রিফ্রেশ হলে ওয়েবজিএল আবার ড্রয়িং অপারেশন চালিয়ে যাবে।

পূর্ণাঙ্গ ঘনক তৈরি করতে হলে ভারটেক্স বাফার, শেডার ও ম্যাটিক্স ট্রান্সফরমেশন যুক্ত করতে হবে।

ক্যানভাস ইলিমেন্টের আকার বনাম অঙ্কনের পৃষ্ঠের আকার

HTML5 ক্যানভাস ইলিমেন্টের প্রদর্শিত আকার এবং অঙ্কনের পৃষ্ঠের আকার ভিন্ন হতে পারে, যা ওয়েব গ্রাফিক্স রেন্ডারিংয়ের ক্ষেত্রে গুরুত্বপূর্ণ একটি বিষয়। ক্যানভাস ইলিমেন্টের আকার সিএসএস এর মাধ্যমে নির্ধারণ করা যায়, যেখানে অঙ্কনের পৃষ্ঠের আকার HTML অ্যাট্রিবিউটের মাধ্যমে নির্ধারণ করা হয়। যদি শুধুমাত্র CSS ব্যবহার করে ক্যানভাসের আকার পরিবর্তন করা হয়, তবে এটি স্কেলিং সমস্যার সৃষ্টি করতে পারে এবং অঙ্কনের গুণগত মান কমে যেতে পারে।^[৯]

অর্থাৎ, একটি ক্যানভাসের আসলে দুটি আকার থাকে, উভয় পদ্ধতি একই চূড়ান্ত ফলাফল প্রদান করার কথা, তবে ব্যবহারের ক্ষেত্রে কিছু সূক্ষ্ম পার্থক্য রয়েছে।

১. HTML অ্যাট্রিবিউট ব্যবহার করে:

<canvas id="myCanvas" width="800" height="600" style="width: 400px; height: 300px;"></canvas>

এখানে,

width="800" এবং height="600" অঙ্কনের পৃষ্ঠের প্রকৃত রেজোলিউশন নির্ধারণ করে।
style="width: 400px; height: 300px;" শুধুমাত্র CSS দ্বারা প্রদর্শিত আকার পরিবর্তন করে।
ব্রাউজার ৮০০×৬০০ পিক্সেল অঙ্কনের পৃষ্ঠকে ৪০০×৩০০ পিক্সেলে স্কেল করবে, যা স্কেলড ইমেজ তৈরি করতে পারে (এবং এটি ধোঁয়াটে বা পিক্সেলেটেড দেখাতে পারে)।

২. JavaScript দ্বারা ডাইনামিকভাবে সেট করা:

var canvas = document.getElementById("myCanvas");
canvas.width = 800;
canvas.height = 600;
canvas.style.width = "400px";
canvas.style.height = "300px";

এখানে,

canvas.width = 800; এবং canvas.height = 600; সরাসরি অঙ্কনের পৃষ্ঠের রেজোলিউশন নির্ধারণ করছে।
canvas.style.width = "400px"; এবং canvas.style.height = "300px"; শুধুমাত্র CSS দ্বারা প্রদর্শিত আকার পরিবর্তন করছে।
এই পদ্ধতিটি JavaScript এর মাধ্যমে ডাইনামিকভাবে ক্যানভাস আপডেট করতে ব্যবহৃত হয় এবং CSS থেকে নির্ভরতা দূর করে।

মূল পার্থক্য

পদ্ধতি	অঙ্কনের পৃষ্ঠের আকার	প্রদর্শিত আকার	ধোঁয়াটে সমস্যা?
HTML অ্যাট্রিবিউট	`width="800" height="600"`	`style="width: 400px; height: 300px;"`	হ্যাঁ, ব্রাউজার স্কেল করলে ধোঁয়াটে হতে পারে
JavaScript (ডাইনামিক পদ্ধতি)	`canvas.width = 800; canvas.height = 600;`	`canvas.style.width = "400px"; canvas.style.height = "300px";`	না, কারণ JavaScript দ্বারা সরাসরি সেট করা হচ্ছে

কখন কোনটি ব্যবহার করবেন?

যদি স্ট্যাটিক ক্যানভাস তৈরি করতে চান, তাহলে HTML অ্যাট্রিবিউট ব্যবহার করুন।
যদি ডাইনামিকভাবে স্কেলিং বা রেজোলিউশন সামঞ্জস্য করতে চান, তাহলে JavaScript ব্যবহার করুন।
উচ্চ রেজোলিউশনের গ্রাফিক্সের জন্য JavaScript পদ্ধতিটি ভালো, কারণ এটি CSS স্কেলিং এড়িয়ে রেন্ডারিং মান বজায় রাখে।

ক্যানভাস বনাম স্কেলেবল ভেক্টর গ্রাফিক্স (SVG)

SVG হল ব্রাউজারে গ্রাফিক্স আঁকার একটি বিকল্প পদ্ধতি।^[১০] ক্যানভাস একটি রাস্টার -ভিত্তিক প্রযুক্তি, যেখানে প্রতিটি পিক্সেল সরাসরি আঁকা হয়, তবে SVG ভেক্টর-ভিত্তিক, যেখানে প্রতিটি আঁকা আকৃতি একটি সিন গ্রাফ বা ডকুমেন্ট অবজেক্ট মডেলে হিসেবে সংরক্ষিত হয় এবং পরবর্তীতে একটি বিটম্যাপে রেন্ডার করা হয়। এর ফলে, যদি একটি SVG অবজেক্টের বৈশিষ্ট্য পরিবর্তন করা হয়, তাহলে ব্রাউজার স্বয়ংক্রিয়ভাবে সম্পূর্ণ দৃশ্যটি পুনরায় রেন্ডার করতে পারে।

অন্যদিকে, ক্যানভাস তাৎক্ষণিক মোড-এ অঙ্কন করে। উদাহরণস্বরূপ, একটি ক্যানভাসে আঁকা আয়তক্ষেত্রটি (rectangle) শুধুমাত্র ক্যানভাসে পরিবর্তন আনে এবং এর কোনো আলাদা অস্তিত্ব থাকে না। যদি এই আয়তক্ষেত্রের অবস্থান পরিবর্তন করতে হয়, তবে সম্পূর্ণ ক্যানভাস পুনরায় আঁকতে হবে, যার মধ্যে আগের সব উপাদানকেও পুনরায় অঙ্কন করতে হবে। কিন্তু SVG-এর ক্ষেত্রে, শুধু আয়তক্ষেত্রের অবস্থান পরিবর্তন করলেই ব্রাউজার স্বয়ংক্রিয়ভাবে দৃশ্যটি আপডেট করতে পারে।

SVG ব্যবহারকারীদের XML- ভিত্তিক চিত্র তৈরি ও সম্পাদনা করতে দেয়, যা বিভিন্ন XML এডিটিং টুলের মাধ্যমে সহজে নিয়ন্ত্রণযোগ্য।

SVG-এর সিন গ্রাফ বিভিন্ন ইভেন্ট হ্যান্ডলারের সাথে সংযুক্ত করা যায়, যার ফলে কোনো SVG আয়তক্ষেত্র (rectangle) একটি onClick ইভেন্টের মাধ্যমে প্রতিক্রিয়া জানাতে পারে। কিন্তু ক্যানভাসে একই কাজ করতে হলে ম্যানুয়ালি মাউস ক্লিকের অবস্থানকে অবজেক্টের অবস্থানের সাথে মিলিয়ে দেখতে হবে।

মূলত, ক্যানভাস একটি লো-লেভেল API, যা উচ্চ-স্তরের গ্রাফিক্স ইন্টারফেস তৈরির জন্য ব্যবহার করা যেতে পারে (যেমন, SVG সমর্থন)। কিছু JavaScript লাইব্রেরি রয়েছে, যা ক্যানভাস ব্যবহার করে SVG-এর আংশিক কার্যকারিতা প্রদান করতে পারে। উদাহরণস্বরূপ, Android 2.x-এর কিছু ব্রাউজার SVG সমর্থন করত না, কিন্তু ক্যানভাস সমর্থন করত—এ কারণে কিছু লাইব্রেরি ক্যানভাসের মাধ্যমে SVG-এর মতো ফিচার প্রদান করেছিল।

যদিও ক্যানভাস ও SVG দুইটি স্বাধীন প্রযুক্তি, কিছু সিন গ্রাফ লাইব্রেরি ক্যানভাসের জন্য উপলব্ধ রয়েছে, আবার SVG-এর মধ্যেও বিটম্যাপ সম্পাদনার কিছু ক্ষমতা রয়েছে। ফলে, এই দুই প্রযুক্তির মধ্যে পার্থক্য থাকা সত্ত্বেও কিছু ক্ষেত্রে একে অপরের পরিপূরক হিসেবেও কাজ করতে পারে।

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

ক্যানভাস ইলিমেন্টের প্রাথমিক প্রবর্তনের সময়, এটি ওয়েব স্ট্যান্ডার্ড কমিউনিটির মধ্যে মিশ্র প্রতিক্রিয়া পেয়েছিল। অনেকেই Apple-এর বিরুদ্ধে অভিযোগ করেছিলেন যে, তারা SVG স্ট্যান্ডার্ডকে সমর্থন করার পরিবর্তে একটি নতুন মালিকানাধীন ইলিমেন্ট তৈরি করেছে। এছাড়াও, ক্যানভাসের সিনট্যাক্স সংক্রান্ত কিছু উদ্বেগ ছিল, যেমন নেমস্পেসের (namespace) অনুপস্থিতি। ^[১১]

ক্যানভাসের মেধাস্বত্ব (Intellectual Property over Canvas)

১৪ মার্চ ২০০৭ সালে, WebKit ডেভেলপার ডেভ হায়াট Apple-এর সিনিয়র পেটেন্ট কাউন্সেল হেলেন প্লটকা ওয়ার্কম্যান,^[১২]-এর একটি ইমেইল ফরোয়ার্ড করেন। এই ইমেইলে বলা হয়েছিল যে, Apple WHATWG-এর "Web Applications 1.0" ওয়ার্কিং ড্রাফটের (24 মার্চ ২০০৫ তারিখের সংস্করণ) "Graphics: The bitmap canvas",^[১৩] শিরোনামের 10.1 অনুচ্ছেদে বর্ণিত সমস্ত মেধাস্বত্ব সংরক্ষণ করছে। তবে, তারা যদি এই স্পেসিফিকেশন কোনো আনুষ্ঠানিক পেটেন্ট নীতিমালা সহ একটি স্ট্যান্ডার্ড সংস্থায় স্থানান্তর করা হয়, তাহলে পেটেন্ট লাইসেন্সিংয়ের জন্য দরজা খোলা থাকবে।

এই ঘোষণার ফলে ওয়েব ডেভেলপারদের মধ্যে ব্যাপক আলোচনা সৃষ্টি হয় এবং WHATWG-এর পেটেন্ট নীতির অভাব নিয়ে প্রশ্ন ওঠে, বিশেষ করে যেখানে World Wide Web Consortium (W3C) স্পষ্টভাবে রয়্যালটি-মুক্ত লাইসেন্সের (royalty-free licenses) পক্ষে ছিল। পরবর্তীতে, Apple W3C-এর রয়্যালটি-মুক্ত পেটেন্ট লাইসেন্সিং শর্তে ক্যানভাস সম্পর্কিত তাদের পেটেন্ট প্রকাশ করে।^[১৪] এর ফলে, যদি ক্যানভাস ইলিমেন্ট ভবিষ্যতে HTML ওয়ার্কিং গ্রুপের মাধ্যমে W3C-এর কোনো সুপারিশ হিসাবে স্বীকৃত হয়, তাহলে Apple বাধ্য থাকবে বিনামূল্যে পেটেন্ট লাইসেন্স সরবরাহ করতে।^[১৫]

গোপনীয়তা সংক্রান্ত উদ্বেগ (Privacy Concerns)

Canvas fingerprinting হল ব্রাউজার ফিঙ্গারপ্রিন্টিং কৌশলগুলোর একটি অংশ, যা HTML5 ক্যানভাস ইলিমেন্ট ব্যবহার করে অনলাইন ব্যবহারকারীদের ট্র্যাক করার জন্য ওয়েবসাইটগুলিকে অনুমতি দেয়। এই প্রযুক্তি ২০১৪ সালে ব্যাপক গণমাধ্যমের নজরে আসে,^[১৬]^[১৭]^[১৮]^[১৯] যখন প্রিন্সটন বিশ্ববিদ্যালয় এবং KU Leuven বিশ্ববিদ্যালয়ের গবেষকরা তাদের গবেষণাপত্র "The Web Never Forgets"^[২০]-এ এটি বিস্তারিতভাবে ব্যাখ্যা করেন।

ক্যানভাস ফিঙ্গারপ্রিন্টিং নিয়ে গোপনীয়তার মূল উদ্বেগটি হলো, শুধু কুকি (cookies) মুছে ফেলা বা ব্রাউজারের ক্যাশ (cache) পরিষ্কার করলেই এটি এড়ানো সম্ভব নয়। ফলে, ব্যবহারকারীরা সহজেই অনলাইনে ট্র্যাকিংয়ের শিকার হতে পারেন এবং তাদের ব্রাউজিং আচরণ নিরীক্ষণ করা সম্ভব হয়।

ব্রাউজার সাপোর্ট

এই উপাদানটি মজিলা ফায়ারফক্স, গুগল ক্রোম, ইন্টারনেট এক্সপ্লোরার, সাফারি, কনকরার, অপেরা ^[২১] এবং মাইক্রোসফ্ট এজ এর বর্তমান সংস্করণ দ্বারা সমর্থিত। ^[২২]

আরো দেখুন

তথ্যসূত্র

↑ MDN contributors (৮ আগস্ট ২০২৪)। "Canvas API"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫। {{ওয়েব উদ্ধৃতি}}: |শেষাংশ= প্যারামিটারে সাধারণ নাম রয়েছে (সাহায্য)
↑ Ian Hixie (১২ জুলাই ২০০৪)। "Extending HTML"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Mozilla Developer Connection। "HTMLCanvasElement"। ৪ জুন ২০১১ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "Opera 9.0 changelog"। ১০ সেপ্টেম্বর ২০১২ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "HTML Standard"। html.spec.whatwg.org। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
1 2 3 "Basic usage of canvas - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ২১ নভেম্বর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "HTML Canvas Reference"। www.w3schools.com (মার্কিন ইংরেজি ভাষায়)। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "Getting started with WebGL - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ২৮ অক্টোবর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "Optimizing canvas - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ৪ অক্টোবর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "Scalable Vector Graphics | CorelDRAW"। www.coreldraw.com। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Ian Hickson remarks regarding canvas and other Apple extensions to HTML
↑ "[whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007"। ২ মে ২০০৭ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas
↑ HTML Working Group Patent Policy Status – Known Disclosures
↑ W3C patent policy in use by HTML working group
↑ Knibbs, Kate (২১ জুলাই ২০১৪)। "What You Need to Know About the Sneakiest New Online Tracking Tool"। Gizmodo। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Joseph Steinberg (২৩ জুলাই ২০১৪)। "You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know"। Forbes। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Angwin, Julia (২১ জুলাই ২০১৪)। "Meet the Online Tracking Device That is Virtually Impossible to Block"। ProPublica। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Kirk, Jeremy (২১ জুলাই ২০১৪)। "Stealthy Web tracking tools pose increasing privacy risks to users"। PC World। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (২৪ জুলাই ২০১৪)। "The Web never forgets: Persistent tracking mechanisms in the wild"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ Sucan, Mihai (৪ ফেব্রুয়ারি ২০১০)। "SVG or Canvas? Сhoosing between the two"। Opera Software। ২৩ জুন ২০১০ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।
↑ "Canvas, Microsoft Edge documentation"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

বহিঃসংযোগ

The canvas element, W3C, ২৮ অক্টোবর ২০১৪, সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫
HTML Canvas 2D Context, W3C, ২১ আগস্ট ২০১৪, সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫
Canvas description in WHATWG Web Applications draft specifications
Canvas reference page in Apple Developers Connection
Basic Canvas Tutorial on Opera Developer Community
Canvas tutorial and introductory page on Mozilla Developer center ওয়েব্যাক মেশিনে আর্কাইভকৃত ৩ আগস্ট ২০১২ তারিখে

[1] MDN contributors (৮ আগস্ট ২০২৪)। "Canvas API"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫। {{ওয়েব উদ্ধৃতি}}: |শেষাংশ= প্যারামিটারে সাধারণ নাম রয়েছে (সাহায্য)

[2] Ian Hixie (১২ জুলাই ২০০৪)। "Extending HTML"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[3] Mozilla Developer Connection। "HTMLCanvasElement"। ৪ জুন ২০১১ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[4] "Opera 9.0 changelog"। ১০ সেপ্টেম্বর ২০১২ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[5] "HTML Standard"। html.spec.whatwg.org। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[:0-6] 1 2 3 "Basic usage of canvas - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ২১ নভেম্বর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[7] "HTML Canvas Reference"। www.w3schools.com (মার্কিন ইংরেজি ভাষায়)। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[8] "Getting started with WebGL - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ২৮ অক্টোবর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[9] "Optimizing canvas - Web APIs | MDN"। developer.mozilla.org (মার্কিন ইংরেজি ভাষায়)। ৪ অক্টোবর ২০২৪। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[10] "Scalable Vector Graphics | CorelDRAW"। www.coreldraw.com। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[11] Ian Hickson remarks regarding canvas and other Apple extensions to HTML

[12] "[whatwg] Web Applications 1.0 Draft, David Hyatt, Wed Mar 14 14:31:53 PDT 2007"। ২ মে ২০০৭ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[13] Web Applications 1.0 Early Working Draft - Dynamic graphics: The bitmap canvas

[14] HTML Working Group Patent Policy Status – Known Disclosures

[15] W3C patent policy in use by HTML working group

[Knibbs-16] Knibbs, Kate (২১ জুলাই ২০১৪)। "What You Need to Know About the Sneakiest New Online Tracking Tool"। Gizmodo। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[Steinberg-17] Joseph Steinberg (২৩ জুলাই ২০১৪)। "You Are Being Tracked Online By A Sneaky New Technology -- Here's What You Need To Know"। Forbes। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[Angwin-18] Angwin, Julia (২১ জুলাই ২০১৪)। "Meet the Online Tracking Device That is Virtually Impossible to Block"। ProPublica। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[Kirk-19] Kirk, Jeremy (২১ জুলাই ২০১৪)। "Stealthy Web tracking tools pose increasing privacy risks to users"। PC World। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[WebNeverForgets-20] Acar, Gunes; Eubank, Christian; Englehardt, Steven; Juarez, Marc; Narayanan, Arvind; Diaz, Claudia (২৪ জুলাই ২০১৪)। "The Web never forgets: Persistent tracking mechanisms in the wild"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[21] Sucan, Mihai (৪ ফেব্রুয়ারি ২০১০)। "SVG or Canvas? Сhoosing between the two"। Opera Software। ২৩ জুন ২০১০ তারিখে মূল থেকে আর্কাইভকৃত। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[22] "Canvas, Microsoft Edge documentation"। সংগ্রহের তারিখ ২৪ ফেব্রুয়ারি ২০২৫।

[১]

[২]

[৩]

[৪]

[৫]

[৬]

[৭]

[৮]

[৯]

[১০]

[১১]

[১২]

[১৩]

[১৪]

[১৫]

[১৬]

[১৭]

[১৮]

[১৯]

[২০]

[২১]

[২২]

ইতিহাস

প্রযুক্তিগত পর্যালোচনা

সিনট্যাক্স ও অ্যাট্রিবিউটসমূহ [৬]

ডিফল্ট আচরণ এবং ফোলব্যাক কনটেন্ট [৬]

রেন্ডারিং কন্টেক্সট [৬]

2D অঙ্কন ফাংশনসমূহ [৭]

WebGL এবং WebGL2 সমর্থন[৮]

2D রেন্ডারিং API ফাংশনসমূহ

১. আকৃতি আঁকা

২. পথ তৈরি ও রেখা আঁকা

৩. টেক্সট রেন্ডারিং

৪. ছবি রেন্ডারিং

3D রেন্ডারিং API (WebGL API এর ব্যবহার)

১. WebGL ক্যানভাস সেটআপ করা

২. একটি 3D ত্রিভুজ আঁকা

৩. WebGL ব্যবহার করে ঘূর্ণায়মান রঙিন ঘনক

ক্যানভাস ইলিমেন্টের আকার বনাম অঙ্কনের পৃষ্ঠের আকার

১. HTML অ্যাট্রিবিউট ব্যবহার করে:

২. JavaScript দ্বারা ডাইনামিকভাবে সেট করা:

মূল পার্থক্য

ক্যানভাস বনাম স্কেলেবল ভেক্টর গ্রাফিক্স (SVG)

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

ক্যানভাসের মেধাস্বত্ব (Intellectual Property over Canvas)

গোপনীয়তা সংক্রান্ত উদ্বেগ (Privacy Concerns)

ব্রাউজার সাপোর্ট

আরো দেখুন

তথ্যসূত্র

বহিঃসংযোগ

সিনট্যাক্স ও অ্যাট্রিবিউটসমূহ ^[৬]

ডিফল্ট আচরণ এবং ফোলব্যাক কনটেন্ট ^[৬]

রেন্ডারিং কন্টেক্সট ^[৬]

2D অঙ্কন ফাংশনসমূহ ^[৭]

WebGL এবং WebGL2 সমর্থন^[৮]