After working/studying hours with canvas i have managed to get the image clone and it's pixels now i have made the user select a color from a color specterm and i have that color hex in my function :
move: function (color) {
// 'color' is the value user selected
var img_id = jQuery(".selected_bg_img").attr("id");
alert(img_id);
var x = 0;
var y = 0;
var width = 409;
var height = 409;
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById(img_id);
ctx.drawImage(img,x,y,width,height);
var imageData = ctx.getImageData(0,0,width,height);
var data = imageData.data;
alert(data);
}
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
[166, 158, 152, 255, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0…]
[110, 118, 124, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255, 255…]
var imageData = ctx.getImageData(0,0,width,height);
var data = imageData.data;
for (var i=0;i<data.length;i+=4)
{
data[i]=255-data[i];
data[i+1]=255-data[i+1];
data[i+2]=255-data[i+2];
data[i+3]=255;
}
console.log(data);
Here you go. It looks like I gave bad and misleading information earlier when I said that the link you'd found was going to be appropriate. sorry!
Basically, you needed to use the multiply
composition mode.
Here's a demo for you to try on. Clicking the 3rd image picks a new colour.
function byId(id){return document.getElementById(id)}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('canvas2').addEventListener('click', onCanvasClicked, false);
colorize('green');
}
function onCanvasClicked(evt)
{
var newColour = getRandomColour();
colorize(newColour);
}
function getRandomColour()
{
return '#' + Math.floor(Math.random() * (Math.pow(2,24)-1)).toString(16);
}
function colorize(colourToUse)
{
var mask = byId('maskImg');
var colorImg = byId('colorImg');
var width = colorImg.naturalWidth;
var height = colorImg.naturalHeight;
// draw the mask image to a canvas
var can = byId('canvas1');
var ctx = can.getContext('2d');
can.width = width;
can.height = height;
ctx.drawImage(mask, 0, 0);
// colorize the non transparent areas
ctx.globalCompositeOperation = "source-in";
ctx.fillStyle = colourToUse;
ctx.fillRect(0, 0, can.width, can.height);
// draw the combined output
var can2 = byId('canvas2');
var ctx2 = can2.getContext('2d');
can2.width = width;
can2.height = height;
ctx2.drawImage(colorImg, 0, 0);
ctx2.globalCompositeOperation = 'multiply';
ctx2.drawImage(can,0,0);
}
body {
background-color: ivory;
padding: 20px;
}
canvas
{
border: 1px solid red;
width: 275px;
height: 275px;
}
.dontShow
{
display: none;
}
<img style='width:275px; height:275px' id='colorImg' src='http://cache1.artprintimages.com/images/spp/living_61_70.jpg'/><canvas id="canvas1"></canvas><canvas id='canvas2'></canvas>
<!-- much easier than using image pre-loaders. onDocLoaded wont be fired until the html with images,script and css are available or have failed to load-->
<img class='dontShow' id='maskImg' src='http://cache1.artprintimages.com/images/spp/living_61_70_mask.png'/>