Vẽ hình tròn đầy ô vuông 1px màu ngẫu nhiên trên HTML5 canvas

Khi cần fill một hình tròn với pixel 1x1, tất cả màu khác nhau trong trình duyệt, có thể dùng cách đơn giản:

• Vẽ tất cả pixel với màu ngẫu nhiên trên lưới 200x200 trên canvas
• Thay đổi composite mode
• Vẽ hình tròn lên trên

Xem ví dụ:

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); // Làm pixel sắc nét
for(; y < diamet; y++) { // lưới x/y
  for(x = 0; x < diamet; x++) {
    ctx1.fillStyle = getRndColor(); // Màu ngẫu nhiên
    ctx1.fillRect(x, y, 2, 2); // Vẽ pixel
  }
}
// tạo circle
// xóa pixel bên ngoài hình tiếp theo
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 + ')';
}