একটি ক্যানভাস হল HTML পৃষ্ঠার একটি আয়তক্ষেত্রাকার এলাকা। আমরা জাভাস্ক্রিপ্টের সাহায্যে এই আয়তক্ষেত্রাকার এলাকায় (ক্যানভাস) গ্রাফিক্স আঁকতে পারি।
ক্যানভাস HTML5 এ −
হিসাবে তৈরি করা যেতে পারে<canvas id = ”canvas1” width = ”250” height = ”150”></canvas>
এটি প্রস্থ=200 এবং উচ্চতা=100 সহ ক্যানভাস1 নামের একটি খালি ক্যানভাস তৈরি করে।
এতে গ্রাফিক্স আঁকতে আমরা JavaScript −
ব্যবহার করিvar canvas = document.getElementById("Canvas1");
var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0,0); ctx1.lineTo(300,200);
ctx1.stroke(); // This method actually draw graphics as per context object অনুযায়ী গ্রাফিক্স আঁকে এই গ্রাফিকটি সংরক্ষণ করতে, আমাদের এটিকে কিছু ডেটা url যেমন img.png বা img.jpg হিসাবে সংরক্ষণ করতে হবে
এর জন্য, আমরা লিখব −
var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png) so that it can be saved as image.
এইভাবে, আমরা HTML5 ফাইলে ক্যানভাস ডেটা সংরক্ষণ করতে পারি।
