আগের পর্বে আমরা শিখেছিলাম ব্রাউজারে ডেটা কীভাবে সেভ রাখা যায়। এই পর্বে আমরা দেখব সম্পূর্ণ ভিন্ন একটা জিনিস — <canvas> ট্যাগ দিয়ে কীভাবে সরাসরি JavaScript দিয়ে ব্রাউজারে আঁকা যায়। এটা গেম, চার্ট, ড্রয়িং অ্যাপ, এমনকি ছবি এডিটরের ভিত্তি।
Canvas কী?
<canvas> হলো একটা HTML ট্যাগ যেটা একটা ফাঁকা ড্রয়িং এরিয়া তৈরি করে। নিজে থেকে এটা কিছুই দেখায় না — JavaScript দিয়ে এর ভিতরে লাইন, শেপ, টেক্সট, ছবি আঁকতে হয়।
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
</script>
এখানে getContext("2d") আমাদের একটা "ড্রয়িং টুলবক্স" দেয় — এই ctx অবজেক্ট দিয়েই সব আঁকাআঁকি হবে।
বেসিক শেপ আঁকা
প্রথমে চলো একটা আয়তক্ষেত্র (rectangle) আঁকি।
// ভরাট আয়তক্ষেত্র ctx.fillStyle = "#2563eb"; ctx.fillRect(20, 20, 150, 80); // x, y, width, height // শুধু বর্ডার ctx.strokeStyle = "#dc2626"; ctx.lineWidth = 3; ctx.strokeRect(200, 20, 150, 80); // এরিয়া মুছে ফেলা ctx.clearRect(20, 20, 50, 50);
বৃত্ত (circle) আঁকতে হয় একটু ভিন্নভাবে — arc() মেথড দিয়ে:
ctx.beginPath(); ctx.arc(150, 150, 50, 0, Math.PI * 2); // x, y, radius, startAngle, endAngle ctx.fillStyle = "#16a34a"; ctx.fill();
রেখা (line) আঁকতে moveTo() দিয়ে শুরুর বিন্দু আর lineTo() দিয়ে পরের বিন্দু ঠিক করতে হয়:
ctx.beginPath(); ctx.moveTo(50, 250); ctx.lineTo(200, 250); ctx.lineTo(125, 180); ctx.closePath(); // শুরুর বিন্দুতে ফিরে গিয়ে ত্রিভুজ বানাবে ctx.strokeStyle = "#000"; ctx.stroke();
| মেথড / প্রপার্টি | কাজ |
|---|---|
fillRect(x, y, w, h) |
ভরাট আয়তক্ষেত্র আঁকে |
strokeRect(x, y, w, h) |
শুধু বর্ডারওয়ালা আয়তক্ষেত্র আঁকে |
arc(x, y, r, start, end) |
বৃত্ত বা বৃত্তচাপ আঁকে |
fillText(text, x, y) |
টেক্সট লেখে |
fillStyle / strokeStyle |
রঙ নির্ধারণ করে |
লাইভ ডেমো — মাউস দিয়ে আঁকো
নিচের ক্যানভাসে মাউস চেপে ধরে টেনে দেখো — নিজেই আঁকতে পারবে!
একটা সম্পূর্ণ উদাহরণ — অ্যানিমেটেড বল
চলো একটা বল বানাই যেটা ক্যানভাসের ভিতরে বাউন্স করবে — এটা requestAnimationFrame() ব্যবহার করে অ্যানিমেশনের বেসিক দেখায়।
<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8" />
<title>বাউন্সিং বল</title>
</head>
<body>
<canvas id="ballCanvas" width="400" height="300" style="border: 1px solid #ccc;"></canvas>
<script>
const canvas = document.getElementById("ballCanvas");
const ctx = canvas.getContext("2d");
let x = 50, y = 50;
let dx = 2, dy = 3; // দিক ও গতি
const radius = 20;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2);
ctx.fillStyle = "#f97316";
ctx.fill();
// দেয়ালে ধাক্কা লাগলে দিক পাল্টানো
if (x + radius > canvas.width || x - radius < 0) dx = -dx;
if (y + radius > canvas.height || y - radius < 0) dy = -dy;
x += dx;
y += dy;
requestAnimationFrame(draw);
}
draw();
</script>
</body>
</html>
এখানে clearRect() দিয়ে প্রতি ফ্রেমে ক্যানভাস মুছে নতুন করে আঁকা হচ্ছে — এভাবেই ক্যানভাসে অ্যানিমেশন কাজ করে।
নিজে চেষ্টা করো
Exercise:
- একটা ক্যানভাসে তোমার নামের প্রথম অক্ষর দিয়ে একটা সাধারণ লোগো আঁকো (শেপ + টেক্সট মিলিয়ে)।
- বাউন্সিং বল উদাহরণটা পরিবর্তন করে দুইটা বল বানাও, যারা আলাদা গতিতে চলবে।
- লাইভ ড্রয়িং ডেমোতে একটা কালার পিকার (
<input type="color">) যোগ করো, যাতে ব্যবহারকারী রঙ পাল্টাতে পারে। fillText()ব্যবহার করে ক্যানভাসে বাংলা টেক্সট লেখার চেষ্টা করো।
পরের পর্বে যা থাকছে
পরের পর্বে আমরা শিখব ছবি আঁকার আরেকটা উপায় — SVG (Scalable Vector Graphics)।