We would like to know how to create gradient color in purple.
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'
src='http://code.jquery.com/jquery-2.0.0b1.js'></script>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){<!--from w w w . j a va2 s . c om-->
var width = 400;
var height = 400;
var size = width * height;
var colors = [];
for(var x=0;x<width;x++)
for(var y=0;y<height;y++)
{ var red = 0x6b+(x>>3)+(y>>2); if(red>0xff) red = 0xff;
colors[y*width+x] = (red<<16)|(0x3b<<8)|0xc6;
}
var out = $("#out")[0];
var ctx = out.getContext('2d');
var cbuffer = ctx.createImageData(width,height);
var buffer = cbuffer.data;
var i=0, n=0, r,g,b,color;
while(i < size){
color = colors[i]; // get color
// extract r,g,b ...
var r = (color>>16)&255;
var g = (color>>8)&255;
var b = color&255;
// fill buffer with each color part
buffer[n++] = r;
buffer[n++] = g;
buffer[n++] = b;
buffer[n++] = 255; // alpha to max
i++;
}
ctx.putImageData(cbuffer,1,1);
});//]]>
</script>
</head>
<body>
<canvas style='width:400px;height:400px' id="out"></canvas>
</body>
</html>
The code above is rendered as follows: