function getFore(foreground){ var foreground = foreground.value; var source = 'images/' + foreground; document.getElementById("fore").innerHTML = foreground; document.getElementById("msi-fore").src = source; } function getBack(background){ var background = background.value; var source = '\'url(images/' + background + ")\'"; document.getElementById("back").innerHTML = source; document.getElementById("1").style.backgroundImage = "url('back.png')"; } $(document).ready(function() { $("img").mousemove(function(event) { var x = event.pageX - this.offsetLeft; var y = event.pageY - this.offsetTop; //alert("X Coordinate: " + x + " Y Coordinate: " + y); var circle = 20*20*3.14; $('div.movestatus').text(circle); x += " " + y; $('div.back').text(x); }); }); function edit(){ // var c = document.getElementById("myCanvas"); // var ctx = c.getContext("2d"); // var img = document.getElementById("msi-fore"); // ctx.drawImage(img, 0, 0); // var imgData = ctx.getImageData(0, 0, c.width, c.height); // // invert colors // var i; // for (i = 0; i < imgData.data.length; i += 4){ // document.getElementById("dimensions").innerHTML = i; // if(i == x){ // imgData.data[i+3] = 0; // } // } // ctx.putImageData(imgData, 0, 0); // }; // A. Buscar mejorar la extraccion de coordenadas de x y y. // B. Carcular cada esquina del circulo // C. dibujar la imagen var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); var img = document.getElementById("msi-fore"); ctx.drawImage(img, 0, 0); var imgData = ctx.getImageData(60, 60, 200, 200); // invert colors var i; for (i = 0; i < imgData.data.length; i += 4){ if(i > 150000){ imgData.data[i+3] = 60;} } document.getElementById("dimensions").innerHTML = i; ctx.putImageData(imgData, 60, 60); }; function clean(){ document.getElementById("myCanvas").innerHTML = ""; }