window.onload = function() {
var Can1 = document.getElementById('canvas2');
var ctx = Can1.getContext("2d");
Can1.width=960;
Can1.height=720;
//ctx.fillStyle = "rgba(0,255,0,0)";
//ctx.fillRect(0,0,960,720);
var imgData=ctx.getImageData(0,0,960,720);
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255/*-imgData.data[i]*/;
imgData.data[i+1]=0/*255-imgData.data[i+1]*/;
imgData.data[i+2]=0/*255-imgData.data[i+2]*/;
imgData.data[i+3]=255-imgData.data[i+3];
}
ctx.putImageData(imgData,0,0);
}
Asked
Active
Viewed 562 times
1

Nishant Jani
- 1,965
- 8
- 30
- 41

Ashisha Nautiyal
- 1,389
- 2
- 19
- 39
-
i want that canvas to color by red but without affecting the alpha value . – Ashisha Nautiyal Feb 13 '13 at 06:13
-
Its a bug in android browser – Ashisha Nautiyal Feb 13 '14 at 10:07
1 Answers
2
This will change every pixel of your canvas to red with alpha unchanged;
var Can1 = document.getElementById("canvas2");
var ctx = Can1.getContext("2d");
// get all canvas pixel data
imgData = ctx.getImageData(0, 0, Can1.width, Can1.height);
// change every pixel on the canvas to rgba(255,0,0,255);
for (var i=0;i<imgData.data.length;i+=4){
imgData.data[i]=255 // this is the red component of this pixel
imgData.data[i+1]=0 // this is the green component of this pixel
imgData.data[i+2]=0 // this is the blue component of this pixel
// To keep the alpha the same, just leave .data[i+3] unchanged
//imgData.data[i+3]; // this is the alpha component of this pixel
}
// replace all the canvas pixels with your modified pixels
ctx.putImageData(imgData,0,0);

markE
- 102,905
- 11
- 164
- 176
-
Thanks buddy i did that but its bug on android not working for my app – Ashisha Nautiyal Apr 19 '13 at 10:23