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