Show HN: My <canvas>-based, Photoshop-esque JavaScript color picker

by spicyj • 16 years ago

73 35 16 years ago

spicyj6• 16 years ago

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.)

jp_sc• 16 years ago

Really nice, congratz.

Instead of using images, the square and slider markers could be drawed on an extra canvas on top.

DrJokepu• 16 years ago

I don't think (programmatically) drawing everything is a good idea. Sprites have been used in computer graphics since time immemorial because they're easy to implement, maintain, change and can offer performance improvements as well.

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.

bd3• 16 years ago

If you want to have it much faster, use transparent PNG image for saturation-value rectangle instead of drawing everything in canvas and then just color its background property according to hue.

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):

http://ecritters.biz/colorselector/

ELV1S• 16 years ago

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.

daychilde2• 16 years ago

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

daychilde2• 16 years ago

It would be really cool to see CMYK support - I prefer HSL to RGB to find good colours that work together; but I prefer CMYK to even HSL

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!

spicyj6• 16 years ago

I'm not quite sure how this would work; the color models I have currently are three-dimensional so can be specified by three pieces of information (square x, square y, bar y). CMYK is 4-dimensional so you'd need something like 2 squares to specify a color. (Note that Photoshop's color picker doesn't have bubbles next to CMYK.)

charliepark• 16 years ago

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

spicyj6• 16 years ago

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• 16 years ago

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.

mynameisraj• 16 years ago

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

paulirish• 16 years ago

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

TimLangley• 16 years ago

You can always "unpack" the packer code

http://yaisb.blogspot.com/2006/10/defeating-dean-edwards-jav...

benatkin• 16 years ago

A sneak preview: http://pastie.org/1117052

spicyj6• 16 years ago

Absolutely. I was just trying to get it under 10k for the contest so I used packer.

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.

proexploit• 16 years ago

I second the "would like to look at the source" and I've got a html5/css3 button maker just waiting on a color picker. What kind of license are you going to distribute it with? I wouldn't want to use it if you weren't aware.

jswinghammer• 16 years ago

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!

smysore• 16 years ago

very cool.

chubs• 16 years ago

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

jonah• 16 years ago

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.

wlievens2• 16 years ago

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)

bd3• 16 years ago

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).

nailer• 16 years ago

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

timinman• 16 years ago

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.)

nader• 16 years ago

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

foxtrot• 16 years ago

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.

maushu• 16 years ago

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

olalonde• 16 years ago

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

spicyj6• 16 years ago

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

eli• 16 years ago

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.

sstrudeau• 16 years ago

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.

Show HN: My &lt;canvas&gt;-based, Photoshop-esque JavaScript color picker

Related Stories

Show HN: My <canvas>-based, Photoshop-esque JavaScript color picker