Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width=400 height=400>Your browser does not support the canvas tag.</canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var context=canvas.getContext('2d');
  
function setPixel(imageData, x, y, r, g, b, a) {
    index = (x + y * imageData.width) * 4;
    imageData.data[index+0] = r;
    imageData.data[index+1] = g;
    imageData.data[index+2] = b;
    imageData.data[index+3] = a;
}
// create a new pixel array
imageData = context.createImageData(canvas.width, canvas.height);
// draw random dots
for (i = 0; i < 10000; i++) {
    x = parseInt(Math.random() * canvas.width);
    y = parseInt(Math.random() * canvas.height);
  
    r = parseInt(Math.random() * 256);
    g = parseInt(Math.random() * 256);
    b = parseInt(Math.random() * 256);
    setPixel(imageData, x, y, r, g, b, 0xff); // 0xff opaque
}
// copy the image data back onto the canvas
context.putImageData(imageData, 0, 0); // at coords 0,0
</script>
</script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers