

Show HN: My &lt;canvas&gt;-based, Photoshop-esque JavaScript color picker - spicyj
http://zetamac.com/picker/

======
spicyj
I made this for the An Event Apart JavaScript 10k contest but unfortunately
finished it after the deadline (but not by much!).

Anyway, here it is for all of you to enjoy. Hopefully useful when you don't
feel like opening up Photoshop to get a CSS color.

I'd love to hear suggestions for how I can improve it. (Sorry that the bubbles
next to Lab are missing; refreshing the square on the left was too slow for it
to be useful.)

~~~
ELV1S
I've made one for 10K too <http://10k.aneventapart.com/Entry/235>. Mine is SVG
based. The code is on GitHub <http://github.com/NV/color-blender>.

~~~
daychilde
I really like being able to select two colours like that - and the in-between
colour is even better. Love that.

------
charliepark
This is really well-done. In terms of suggestions ... how hard would it be to
turn it into a jQuery plugin?

~~~
spicyj
Not really sure; I've never written a jQuery plugin before, so I'll need to
look into what's required. If I have time, I'll do my best.

~~~
JangoSteve
I've never done anything with canvas, but I've written jquery plugins. Let me
know if I can help. And let us know if you post the source code.

------
jonah
Nice!

I've been using this one: [http://johndyer.name/post/2007/09/PhotoShop-like-
JavaScript-...](http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-
Color-Picker.aspx) but yours has a few more options.

One thing I did notice though is that it's almost unusably slow in FF3.6
unlike Safari 5 or Chrome 7 where it's fine.

~~~
wlievens
Unfortunately, canvas is ridiculously slow in FF3 in general. It's
depressing... I built an isometric game in javascript+canvas, paid people to
draw neat pixel graphics, but eventually dropped the project because of the
performance. In Chrome it was reasonable, but in firefox I rarely got above 10
FPS.

(it wasn't the only reason I dropped the project)

~~~
bd
Somehow Firefox became the slowest kid on the block, simply by not improving
as fast as others (FF4 is better, but unfortunately change is smaller than I
hoped for).

Which is really pity, it's still my primary browser and has a lot of good
things going for it.

What's actually worse than FF canvas rendering performance (which, in fact, is
not that bad if you measure it) is its memory management.

FF does something very weird, code that works ok in other browsers causes huge
memory spikes followed by frequent garbage collection (e.g. what makes tens of
KB memory use oscillations in Opera/Chrome makes tens of MB oscillations in
FF).

Even something as simple as assigning repeatedly random numbers to fixed
length array grows memory in FF. Canvas operations do the same, causing memory
use to grow at an alarmingly fast rate.

So if you do animations (or anything which gets executed repeatedly), you get
relatively fast rendering which is triggered erratically and paused due to
"behind the scene" memory management (which slows down everything).

~~~
wlievens
I actually had that memory problem - with canvas - in Chrome rather than in
Firefox: <http://code.google.com/p/chromium/issues/detail?id=20067> It was
fixed at some point though.

~~~
bd
Small world, I created a page referred to in the bug report :).

Yes, Chrome's memory management got better [1] and Firefox's got worse (at
least relatively, they know about the problem and made some improvements [2],
but meanwhile other browsers got even better).

It looks like while both Chrome and FF improved their garbage collectors, FF
somehow got much higher memory consumption in the first place (growing memory
in places where it really shouldn't - aforementioned array assignments or
drawing into canvas).

\-----

[1] I remember a period where Chrome was tuning their memory management, you
would get very different performance between subsequent Chrome updates.

[2] [http://hacks.mozilla.org/2010/01/javascript-speedups-in-
fire...](http://hacks.mozilla.org/2010/01/javascript-speedups-in-firefox-3-6/)

------
mynameisraj
Wow. Really incredible work. Mind posting a packer-free version so we can look
at the source?

~~~
paulirish
Ditto. I really wanna dig into the source. This is a perfect widget for people
to learn some canvas basics from.

~~~
TimLangley
You can always "unpack" the packer code

[http://yaisb.blogspot.com/2006/10/defeating-dean-edwards-
jav...](http://yaisb.blogspot.com/2006/10/defeating-dean-edwards-
javascript.html)

------
jswinghammer
This actually filled a need I have for showing someone who is only mildly
technical how to pick colors for a feature we're testing.

Thanks! It looks great!

------
sstrudeau
Nice implementation. I spent a lot of time looking at these when I was putting
together a UI that needed some color picking.

When I read the headline, I thought you may have made something like my
"dropper"-style color picker using canvas:

<http://github.com/sstrudeau/jquery-dropper>

Mine allows you to pick a color from an image. Two big caveats (haven't found
workarounds for): < IE9 doesn't work and the excanvas VML hack doesn't help
(no pixel-level access to images); and images loaded into a canvas element
have a same-origin restriction similar to XHR.

------
eli
Nicely done. I had intended to do something like a color picker or CSS layout
tool, but instead I started working on a game and got way carried away
(shameless plug: <http://10k.aneventapart.com/Entry/154>)

My first time using <canvas>. It's really a lot more fun than I expected.
Reminds me of the good old days of messing around in Basic.

------
foxtrot
Really nice work, bookmarked for future use.

One addition that may be worth adding is being able to create a swatch based
on colours selected.

------
timinman
This should be easy to convert into a chrome extention:
<http://code.google.com/chrome/extensions/>

(It would increase it's usefulness, because the tool could overlay the current
page and you could then compare colours.)

------
olalonde
Very nice but it would be more usable if the cross pointer would completely
replace the arrow pointer.

~~~
spicyj
In Safari, Chrome and Firefox, it should. I couldn't get it to work properly
on IE9.

------
nailer
Great work! For later, though, browsers are apparently due to be implementing
color picking controls (according to the alistapart HTML5 book anyway).

------
nader
very nice! the only thing missing is adjusting the values with the keyboard
cursor like in photoshop. Arrow-up: 1% more, Arrow-Shift-Up: 10% more

------
chubs
Fantastic! Quite neat - I like it. If i ever decide to compete with photoshop
in the browser, i'll talk to you ;)

------
maushu
There is a slow down when dragging on left side on the grey, unlike on the
right side. Weird performance glitch.

------
smysore
very cool.

