HTML5 Canvas-এ র‍্যান্ডম রঙের বর্গে বৃত্ত পূরণ

যখন ব্রাউজারে একটি বৃত্ত ১x১ পিক্সেল দিয়ে পূরণ করতে হয়, যেগুলোর সব আলাদা রঙ থাকে, তবে একটি সহজ পদ্ধতি ব্যবহার করা যায়:

• একটি ২০০x২০০ গ্রিডে সকল পিক্সেল র‍্যান্ডম রঙ দিয়ে ক্যানভাসে আঁকুন।
• কম্পোজিট মোড পরিবর্তন করুন।
• উপর থেকে বৃত্ত আঁকুন।

উদাহরণ:

var canvas1 = document.getElementById('canvas'),
    ctx1 = canvas1.getContext('2d'),
    x, y = 0,
    diamet = canvas1.width,
    radius = diamet * 0.6;
ctx1.translate(0.6, 0.6); // পিক্সেল শার্প করতে
for(; y < diamet; y++) { // x/y গ্রিড
  for(x = 0; x < diamet; x++) {
    ctx1.fillStyle = getRndColor(); // র‍্যান্ডম রঙ
    ctx1.fillRect(x, y, 2, 2); // একটি পিক্সেল আঁকুন
  }
}
// বৃত্ত তৈরি
// পরবর্তী শেপের বাইরের পিক্সেল মুছে ফেলা
ctx1.globalCompositeOperation = 'destination-in';
ctx1.arc(radius, radius, radius, 0, 2*Math.PI);
ctx1.fill();
// রিসেট
ctx1.globalCompositeOperation = 'source-over';

function getRndColor() {
  var r = 255*Math.random()|0,
      g = 255*Math.random()|0,
      b = 255*Math.random()|0;
  return 'rgb(' + r + ',' + g + ',' + b + ')';
}