Show HN: My <canvas>-based, Photoshop-esque JavaScript color picker
zetamac.com
zetamac.com
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.)
Instead of using images, the square and slider markers could be drawed on an extra canvas on top.
Just imagine the hassle you have to go through if you want to change a programmatically rendered sprite as opposed to opening it in an image editor and simply changing it there.
Long ago I needed color picker, so I did research many options. This was the most efficient implementation I found (the trick I described above comes from here):
It would also be cool if multiple copies of the tool could dynamically be added to pick multiple colours at a time - with, say, up to eight blocks at the top showing the current colour for each selector, and a text box to easily copy the various colours...
Thanks for sharing - this is nice!
I've been using this one: http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-... 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.
(it wasn't the only reason I dropped the project)
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).
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://yaisb.blogspot.com/2006/10/defeating-dean-edwards-jav...
The code is messy right now because I was scrambling at the end to try to finish in time for the contest submission deadline, but I'll upload the original source after I have a chance to clean it up.
Thanks! It looks great!
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.
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.
One addition that may be worth adding is being able to create a swatch based on colours selected.
(It would increase it's usefulness, because the tool could overlay the current page and you could then compare colours.)