Creating a Javascript color picker with jQuery

The canvas element in HTML5 has many useful functions, one of which is to make it easy to create your own color picker using Javascript.

In this tutorial we will insert an image containing a variety of colors into a canvas element. Then when the canvas is clicked on, we will capture the X and Y co-ordinates of the click event and use the getImageData() function to get the RGB color value of the image at those co-ordinates. The HTML document will also contain an element that we will change the background of depending on the picked color.

Setting up the canvas

First we will create a canvas element in our HTML document, as well as a div element that we will use to preview the color that was picked:

<canvas></canvas><br>    
Color preview: <div style="width:50px; height:50px;"></div>    

Next we must acquire or create an image with all the necessary colors like the one here:

We must then create an image object in Javascript, populate it with this image and draw it onto the canvas element.

var colorPickerCanvas;    
    
$( document ).ready(function(){   
 colorPickerCanvas= document.querySelector("canvas").getContext("2d");   
 colorPickerCanvas.height=200;   
 colorPickerCanvas.width=200;   
   
 var img = new Image();   
 img.src = 'color_img.png';   
 $(img).load(function(){   
  colorPickerCanvas.drawImage(img,0,0,200,200);   
 });    
});    

In the above code we first declare our canvas variable which we will use to manipulate the canvas. Once the document is ready, we get the canvas's 2D context and store it in our canvas variable. The height and width are then set to 200, but you can change this depending on your needs. Next we create a new image object and store it in the variable "img". The SRC of the image object is then set to the URL of the image above. Once the image has been successfully loaded into the image object, we can draw it onto the canvas using drawImage(Image, X, Y, width, height).

Retrieving the color of the clicked point

Once we've loaded the image onto the canvas, we must set up an event handler for the canvas that detects when the user clicks on it. In the event handler we will acquire the X and Y co-ordinates to where the user clicked on the canvas. Using the acquired co-ordinates, we can use getImageData(X, Y, width, height).data which returns an array of R, G, B and alpha values for the selected area, we will use this to set the color of the color preview div.

$("canvas").click(function(event){   
 var x = event.pageX - $(this).offset().left;   
 var y = event.pageY - $(this).offset().top;    
    
 var imgData = colorPickerCanvas.getImageData(x, y, 1, 1).data;   
 var R = imgData[0];   
 var G = imgData[1];   
 var B = imgData[2];     
     
 $("div").css("background","rgb("+R+","+G+","+B+")");   
});

The above code should be placed in the $(document).ready function. This will create an event handler for the canvas element that activates when clicked, it also returns an event object which we can use to retrieve the X and Y co-ordinates of the click. Using event.pageX returns the X co-ordinate of the click event relative to the window and not the element, so we have to subtract the left offset of the element to find where the click occurred on the actual canvas, we can use the same logic to find the Y co-ordinate using event.pageY. Once we have the co-ordinates we can create a variable that stores the image data for the specific pixel that was clicked, so in the getImageData function we set the width and height to 1. Now we have an array with a length of 4 containing the RGB and alpha values, we then use just the RGB values to set the background of the div to the picked color.

Once the color has been picked, you can use it for a variety of different tasks, simply store the RGB values of the clicked point and use it as necessary.