Canvas getPixel

Get the colour value of a given pixel from a canvas.

by soulwire

HTML

<canvas id="canvas" width="100" height="100"></canvas>

JavaScript

var canvas = document.getElementById( 'canvas' );
var ctx = canvas.getContext( '2d' );
    
    
function getPixel( ctx, x, y, raw ) {
    var pixels = ctx.getImageData( x, y, 1, 1 );
    var data = pixels.data;
    if ( raw ) return data;
    var hex = data[4] << 24 | data[0] << 16 | data[1] << 8 | data[2];
    return '#' + hex.toString(16);
}
    
var img = new Image();
img.onload = function() {
    ctx.drawImage( this, 0, 0 );
    ctx.fillStyle = getPixel( ctx, 5, 5 );
    ctx.fillRect( 0, 0, 100, 100 );
};
img.src = 'data:image/png;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNjUK/9sAQwALCAgKCAcLCgkKDQwLDREcEhEPDxEiGRoUHCkkKyooJCcnLTJANy0wPTAnJzhMOT1DRUhJSCs2T1VORlRAR0hF/9sAQwEMDQ0RDxEhEhIhRS4nLkVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVFRUVF/8AAEQgACgAKAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8AyVFpaaWZoHLXLy/6k8g8cH9f0o+2xrw00YI4I+bj9adpnGkzMOGBQZ74KvmriRpsX5F6elcTtZH0tFS9pOz0P//Z';