Canvas Based HTML5 HSV Color Picker Component

Category: Color , Javascript | June 10, 2020

0 Comment

Demo Download

AUTHOR:	NC22
VIEWS TOTAL:	1,347 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	June 10, 2020
LICENSE:	MIT

---

Preview:

Description:

A simple and standalone JavaScript library used to render canvas based, mobile-friendly HSV color pickers in the document.

Basic usage:

Load the minified version of the HTML5 Color Picker in the document.

<script src="html5kellycolorpicker.min.js"></script>

Create an html5 canvas element on the webpage.

<canvas id="picker"></canvas>

Attach the HTML5 color picker to an input field.

<input id="color" value="#54aedb">

Initialize the HTML5 color picker and done.

new KellyColorPicker({
    place : 'picker', 
    input : 'color'
});

More configurations to customize the color picker.

new KellyColorPicker({

    // canvas size  
    size: 200, 

    // initial color
    color: '#ffffff',

    // or 'quad'
    method: 'triangle',

    // applies theselected color to the background of the input
    inputColor: true,

    // hex or rgba or mixed
    inputFormat: 'mixed',

    // from 0 to 1
    alpha: 1,

    // shows alpha slider
    alphaSlider: false,

    // auto re-init on window resize
    resizeWith: true

});

Event handlers.

new KellyColorPicker({

    userEvents: {
      updateinput : function(handler, input, manualEnter) {},
      change : function(handler) {}, 
      mousemoveh : function(event, handler, dot) {}, 
      mouseuph : function(event, handler, dot) {}, 
      mousemovesv : function(event, handler, dot) {}, 
      mouseupsv : function(event, handler, dot) {}, 
      mousemoverest : function(event, handler, dot) {}, 
      mouseupalpha : function(event, handler, dot) {}, 
      mousemovealpha : function(event, handler, dot) {}, 
      setmethod : function (handler, newMethod) {},
      selectcolorsaver : function (handler, colorSaverObj) {},
    }

});

API Methods.

instance.setColorByHex(hex)
instance.setColor(color)
instance.setColorForColorSaver(color, side)
instance.setColorSaver(side) // side - "left" or "right"
instance.getColorSaver(side)
instance.addUserEvent(eventKey, event)
instance.removeUserEvent(eventKey)
instance.getCanvas()
instance.getCtx()
instance.getInput()
instance.getSvFig()
instance.getSvFigCursor()
instance.getWheel()
instance.getWheelCursor()
instance.getCurColorHsv()
instance.getCurColorRgb()
instance.getCurColorHex()
.instance.getCurColorRgba()
instance.getCurAlpha
instance.setAlpha(newAlpha)
instance.updateView(dropBuffer)
instance.resize(newSize)
instance.destroy()

Changelog:

06/10/2020

• Doc updated

06/09/2020

• fix readColor method

09/12/2018

• fixed event reference in getEventDot function.