HTML5 Canvas पर रैंडम कलर स्क्वेयर्स से भरा सर्कल ड्रॉ करें

जब हमें ब्राउज़र में एक सर्कल को 1x1 पिक्सेल से भरने की आवश्यकता होती है, सभी अलग-अलग रंगों के साथ, हम इस तरह एक सरल दृष्टिकोण का उपयोग कर सकते हैं: 

• Canvas पर 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 + ')'; 
    }