Canvas How to - Get color value from canvas

Question

We would like to know how to get color value from canvas.

Answer


<!DOCTYPE html>
<html>
<head>
<script type='text/javascript'>//<![CDATA[ 
window.onload=function(){<!--  www. ja  va2s .  co  m-->
    var offset = 5;
    var size = 30;
    var test = 0;
    var canvas = document.getElementById('canvas1');
    canvas.height = size+2*offset;
    var ctx = canvas.getContext('2d');
    function testIt(r, g, b, a) {
        ctx.fillStyle = 'rgba('+r+','+g+','+b+','+a+')';
        ctx.fillRect(
            offset+(size+offset)*test,offset,
            size,size
        );
        var data = ctx.getImageData(
            parseInt(offset+(size+offset)*test+size/2),
            parseInt((offset+size)/2),
            1,1
        ).data;
        var div = document.createElement('DIV');
        div.innerHTML = 'rgba('+r+', '+g+', '+b+', '+a+')<br/>' + '['+data[0]+', '+data[1]+', '+data[2]+', '+data[3]+']';
        document.body.appendChild(div);
        ++test;
    }
    testIt(100,200,150,136/255);
    testIt(100,0,181,136/255);
    testIt(0,200,150,136/255);
    testIt(0,200,150,180/255);
    testIt(200,200,150,120/255);
}//]]>  
</script>
</head>
<body>
  <canvas id="canvas1" width="500" height="70"></canvas>
</body>
</html>

The code above is rendered as follows: