VIVA OBAMA!!!
Move the mouse over the canvas :-)
<script>
var image1 = new Image();
var canvas, context;
var stage, mouseX, mouseY;
var imageData, data;
function init() {
canvas = document.getElementById('myCanvas');
context = canvas.getContext('2d');
image1.src = document.getElementById('myImg').src;
context.drawImage(image1, canvas.width/2 - image1.width/2, canvas.height/2 - image1.height/2);
canvas.addEventListener("mousemove", processImage, false);
canvas.addEventListener("mouseout", createImage, false);
}
function createImage() {
context.drawImage(image1, canvas.width/2 - image1.width/2, canvas.height/2 - image1.height/2);
}
function processImage(event) {
var destX = canvas.width/2 - image1.width/2;
var destY = canvas.height/2 - image1.height/2;
stage = canvas.getBoundingClientRect();
mouseX = event.clientX - stage.left;
mouseY = event.clientY - stage.top;
var R = Math.round(mouseX/canvas.width * 250);
var D = Math.round( Math.sqrt(Math.pow((canvas.width/2 - mouseX), 2) + Math.pow((mouseY - canvas.height/2), 2) / 150 * 200));
var G = Math.round(mouseY/canvas.height * 250);
var B = Math.round( (R+G)/(canvas.width + canvas.height) * 255);
// document.getElementById("display").innerHTML = D + " / " + R + " / " + G + " / " + B;
/////////
context.drawImage(image1, destX, destY);
imageData = context.getImageData(0, 0, canvas.width, canvas.height);
data = imageData.data;
for (var i = 0; i < data.length; i += 4) {
// red
data[i] = R - data[i];
// green
data[i + 1] = G - data[i + 1];
// blue
data[i + 2] = data[i + 2];
// i+3 is alpha (the fourth element)
}
// overwrite original image
context.putImageData(imageData, 0, 0);
}
</script>
<title> VIVA OBAMA!!! ♥ Santiago Echeverry </title>
</head>
<body onload="init();" >
<div align="center">
<br>
<b>VIVA OBAMA!!!</b>
<br><br>
Move the mouse over the canvas :-)<br><br>
<canvas id="myCanvas" width="300" height="300"></canvas>
<div id="display"></div>
<img src="obama.jpg" width="186" height="271" id="myImg" style="display:block;">