Canvas How to - Create gradient color in purple








Question

We would like to know how to create gradient color in purple.

Answer


<!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: