Image Data Example

by Bintang Anandhiya

HTML

<button id="button">BARF!</button>
<canvas width="100" height="100" id="canvas">

CSS

#canvas{
  display: block;
  background-color: #FFFFFF;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  width: 400px;
  height: 400px
}
#button{
  width:400px; 
}

JavaScript

var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

function randomRange(min,max){
	return Math.random() * (max - min) + min;
}

function barf(){
	var imgd = context.getImageData(0, 0, canvas.width, canvas.height);
	var pix = imgd.data;
  
	for(var i = 0; i < pix.length; i += 4){
    pix[i + 0] = randomRange(0,255);
    pix[i + 1] = randomRange(0,255);
    pix[i + 2] = randomRange(0,255);
    pix[i + 3] = 255;
  }
  context.putImageData(imgd, 0, 0);
}

document.getElementById("button").onclick = barf;