Canvas How to - Draw finger pattern

Question

We would like to know how to draw finger pattern.

Answer


<!--from  ww w.  jav  a 2 s  .  c  om-->
<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){
    var canvas = document.getElementById('canvas');
    var canvasWidth  = canvas.width;
    var canvasHeight = canvas.height;
    var ctx = canvas.getContext('2d');
    var imageData = ctx.getImageData(0, 0, canvasWidth, canvasHeight);
    var data = imageData.data;
    for (var y = 0; y < canvasHeight; ++y) {
        for (var x = 0; x < canvasWidth; ++x) {
            var index = (y * canvasWidth + x) * 4;
            var value = x * y & 0xff;
            data[index]   = value;    // red
            data[++index] = value;    // green
            data[++index] = value;    // blue
            data[++index] = 255;      // alpha
        }
    }
    ctx.putImageData(imageData, 0, 0);
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas" height="256" width="256"></canvas><ul>
</body>
</html>

The code above is rendered as follows: