Js Custom Color Picker

Basically lol cant add videos here but with the default html color picker you can move the color picker dot if mouse is down off the colors box boundries and it moves agains the ed

Solution 1:

the solution is simple, dont use the if(isMouseDown){..}, because that will make your code very unresponsive, so what I did is that I declared a varable let i = 0; then on the onMouseDown, whenever that function is called, it will increment the value of i and I changed the onMouseMove from if(isMouseDown){..} to if(i % 2 === 0){..} heres my solution:

classPicker {
        constructor(target, width, height) {
          this.target = target;
          this.width = width;
          this.height = height;
          this.target.width = width;
          this.target.height = height;
          //Get contextthis.context = this.target.getContext("2d");
          //Circlethis.pickerCircle = { x: 10, y: 10, width: 10, height: 10 };
          
          this.listenForEvents();
        }
        
        draw() {
        }
        
        build() {
          let gradient = this.context.createLinearGradient(0, 0, this.width, 0);
      
          //Color Stops
          gradient.addColorStop(0, "rgb(255, 0, 0)");
          gradient.addColorStop(0.15, "rgb(255, 0, 255)");
          gradient.addColorStop(0.33, "rgb(0, 0, 255)");
          gradient.addColorStop(0.49, "rgb(0, 255, 255)");
          gradient.addColorStop(0.67, "rgb(0, 255, 0)");
          gradient.addColorStop(0.84, "rgb(255, 255, 0)");
          gradient.addColorStop(1, "rgb(255, 0, 0)");
          //Fill itthis.context.fillStyle = gradient;
          this.context.fillRect(0, 0, this.width, this.height);
          
          //Apply black and white
              gradient = this.context.createLinearGradient(0, 0, 0,          this.height);
          gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
          gradient.addColorStop(0.5, "rgba(255, 255, 255, 0)");
          gradient.addColorStop(0.5, "rgba(0, 0, 0, 0)");
          gradient.addColorStop(1, "rgba(0, 0, 0, 1)");
          this.context.fillStyle = gradient;
          this.context.fillRect(0, 0, this.width, this.height);
          
          //Circlethis.context.beginPath();
          this.context.arc(this.pickerCircle.x, this.pickerCircle.y, this.pickerCircle.width, 0, Math.PI * 2);
          this.context.strokeStyle = "black";
          this.context.stroke();
          this.context.closePath();
          
        }
        
        listenForEvents() {
          let isMouseDown = true;
          let i =0;
          constonMouseDown = (e) => {
              this.build();
              isMouseDown = true
              i++
              let currentX = e.clientX - this.target.offsetLeft;
            let currentY = e.clientY - this.target.offsetTop;
              this.pickerCircle.x = currentX;
              this.pickerCircle.y = currentY;
             
            }
          
          constonMouseMove = (e) => {
            if(i%2 == 0) {
              this.build();
              let currentX = e.clientX - this.target.offsetLeft;
             let currentY = e.clientY - this.target.offsetTop;
              this.pickerCircle.x = currentX;
              this.pickerCircle.y = currentY;
            }
          }
          
          constonMouseUp = () => {
            
                isMouseDown = false;


            
          }
          
          //Registerthis.target.addEventListener("mousedown", onMouseDown);
          this.target.addEventListener("mousemove", onMouseMove);
          this.target.addEventListener("mousemove", () =>this.onChangeCallback(this.getPickedColor()));
      
          
          document.addEventListener("mouseup", onMouseUp);
        }
        
        getPickedColor() {
          let imageData = this.context.getImageData(this.pickerCircle.x, this.pickerCircle.y, 1, 1);
          return { r: imageData.data[0], g: imageData.data[1], b: imageData.data[2] };
        }
        
        onChange(callback) {
          this.onChangeCallback = callback;
        }
        
           }
         let picker = newPicker(document.getElementById("color-picker"), 250, 220);    picker.build();
    
      picker.onChange((color) => {
         let selected = document.getElementsByClassName("selected")[0];
        selected.style.backgroundColor = `rgb(${color.r}, ${color.g}, ${color.b})`;   });

html, body {
        width: 100%;
        height: 100%;
        font-family: Oxygen, sans-serif;
        text-align: center;   }
         .container {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;   }
         #color-picker {
        border: .5px solid rgba(15, 15, 15, 0.2);   }
         .info {
        width: 12em;
        display: flex;
        margin-left: 4em;
        flex-direction: row;
        justify-content: space-between;   }
         .selected {
        width: 50px;
        height: 50px;
        border-radius: 100%;
        border: 2px solid rgba(15, 15, 15, 0.2);   }

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="style.css"><scriptsrc="app.js"defer></script></head><body><h2>Let's Create a Color Picker</h2><divclass="container"><canvasid="color-picker"></canvas><divclass="info"><h3>Selected Color</h3><divclass="selected"></div></div></div></body></html>