Don't panic I will walk you through the next steps also, which are very similar to what we have done so far. Therefore I am stopping the coding part here. Now if you click anywhere on the color canvas, it will set that color to the body of the document.īelow is the image how it looks and I think we are very close to make our own color picker.Īs this post has already become very long. Now add the below code in your JavaScript file:Įnter fullscreen mode Exit fullscreen mode Here, I will use 300px width and 300px height. Step1: Create a canvas of any dimensions you want. That's cool but how to create it? That what we will do next. Means color canvas = vertical gradient of white to black + horizontal gradient of the selected color The color canvas is basically a mixture of black, white and the selected color's gradients. Let's start creating the color canvas first. In the above image the left one is the color canvas and the right one is the color slider. is chosen on the color slider and the color canvas helps us finding some more variations of the chosen color. The main color like red, green, blue, etc. Ok, so without wasting time, let's get started.Īny HTML/CSS color picker has two main parts, first a color canvas and second a color slider. Var color = "rgba(" + rgba + ", " + rgba + ", " + rgba + ", " + rgba + ")" Ĭonsole.Have you ever wondered how developers make online HTML/CSS color picker? Don't worry, I will walk you through the basic guide which can help you a lot if you were looking for some nice tutorial on how to create the one. Var imgData = canvasContext.getImageData((e.offsetX / canvas.clientWidth) * canvas.width, (e.offsetY / canvas.clientHeight) * canvas.height, 1, 1) Gradient = canvas.getContext('2d').createLinearGradient(0, 0, 0, canvas.height) Gradient.addColorStop((1 / 6) * 5, '#ff00ff')Ĭanvas.getContext('2d').fillStyle = gradientĬanvas.getContext('2d').fillRect(0, 0, canvas.width, canvas.height) Let gradient = canvas.getContext('2d').createLinearGradient(0, 0, canvas.width, 0) Var canvasContext = canvas.getContext('2d') Var canvas = document.getElementById('colorCanvas') Var imgData = canvasContext.getImageData(mouseEvent.offsetX, mouseEvent.offsetY, 1, 1) Īlert("rgba(" + rgba + ", " + rgba + ", " + rgba + ", " + rgba + ")") Image.src = "./images/m圜olorPickerImage.png" Image.onload = () => canvasContext.drawImage(image, 0, 0, image.width, image.height) Var canvasContext = canvasEl.getContext('2d') Var canvasEl = document.getElementById('colorCanvas') In your JavaScript, init the canvas with your color-picker image, and listen to click events Give the canvas element border-radius: 50%, this will make the canvas round, so only clicks inside the circle will be fired, and clicks in the edge will be ignored (we will need click event in the next steps). (a more complex colors-wheel probable needed in real application) If you like me, and after a long search of color-picker library, you didn't find a picker that meet your criteria, you can build you color picker, which not take too long as I will demonstrate.įind a Color-Wheel image that will be your picker, for example: Even a simple search on the NPM packages page will return a few hundreds results to pick from. If the Native color picker not meet your criteria, since it has an obsolete look and not look as slick as modern Color-Pickers, you can use one of literally hundreds of color pickers on the web. As mentioned in the previous answers you can use Native HTML color picker element: įor more info see: Option #2 - 3rd party Color Picker
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |