HTML5 ক্যানভাসে এলোমেলো রঙের বর্গক্ষেত্রে ভরা একটি বৃত্ত আঁকুন

যখন আমাদের একটি ব্রাউজারে বিভিন্ন রঙের 1x1 পিক্সেল দিয়ে একটি বৃত্ত পূরণ করতে হবে, তখন আমরা একটি সাধারণ পদ্ধতি ব্যবহার করতে পারি যেমন:

• একটি ক্যানভাসে 200x200 গ্রিডে কিছু এলোমেলো রঙ দিয়ে সমস্ত পিক্সেল আঁকা
• যৌগিক মোড পরিবর্তন করা হচ্ছে
• শীর্ষে বৃত্ত অঙ্কন

আসুন একটি উদাহরণ দেখা যাক:

var canvas1 = document.getElementById('canvas'), // getting canvas element
   ctx1 = canvas1.getContext('2d'), // getting context
   x, y = 0, // initializing x and y coordinates
   diamet = canvas1.width,
   radius = diamet * 0.6;
   ctx1.translate(0.6, 0.6); //Making pixels sharper
   
   for(; y < diamet; y++) { // x/y grid
      for(x = 0; x < diamet; x++) {
      ctx1.fillStyle = getRndColor(); // Random color setting
      ctx1.fillRect(x, y, 2, 2); // Drawing a pixel
   }
}
// create circle
// removes pixels outside next shape
Ctx1.globalCompositeOperation = 'destination-in';
Ctx1.arc(radius, radius, radius, 0, 2*Math.PI);
Ctx1.fill();

// reset
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 + ')';
}