Colour chooser using Canvas to display a colour wheel. Includes opacity chooser.
JavaScript
Switch branches/tags
Nothing to show
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
layout
test
README.md
index.html

README.md

jquery.choose.color

A minimalist color picker made with the canvas tag. In its infancy. Some things that make it special:

  • Supports alpha transparent colours.
  • Accepts and returns jQuery.Color objects.
  • Scroll to cycle through hues.

Todo

Notes to self.

• Instead of using a DOM node as the choose point, why not draw that thing right on the canvas? It would mean redrawing the canvas on every move, but that won't hurt too much...

• Try creating the colour wheel with three (r, g, b) overlapping radial gradients, just to see quoi ça nous donne.

• DONE The chooser canvas ought to go in a position parent div, so that coordinates for the point can be the same as the canvas.

• DONE The colour wheel could be cached as image data so we don't have to re-render on each slider move. Lightness could then be simulated with a colour underneath.

• DONE Opacity values are unreliable. Either find out why in the canvas, or use CSS opacity on the canvas elem (which would also avoid re-renders of the colour wheel).