3

So I’m trying to draw a simple hue wheel showing the red, green, and blue components and how they relate. The problem is that my (simple, one-degree) arcs are taking on the strokes of later arcs, even though I’m using beginPath() and closePath().

My current progress is at http://meyerweb.com/eric/css/colors/hsl-from-rgb.html. The innermost ring is what’s intended for that ring, with the blue-fade-to-black. The next ring out should show only green-fade-to-black, and the third ring out should have only red-fade-to-black. The outermost, thickest ring is meant to show the full spectrum around the hue wheel, which you can kind of see in the thin spokes (as you can in the other rings).

If I reverse the order of the drawing blocks, then the outermost ring is fine and all the inner rings are messed up, so clearly the stroke styles are leaking forward. I just can’t figure out how or why, nor how to overcome the problem. Should I just define four separate objects (say, ctx1 through ctx4) and draw to each one separately?

I looked at different fillStyle colors for arc in canvas but the recommendations there didn’t seem to help me. Other Googling produced nothing of use.

Community
  • 1
  • 1
Eric A. Meyer
  • 920
  • 6
  • 20

2 Answers2

1

I didn't take a very long look at your code but the problem is probably not with canvas, its probably the order in which you're drawing everything.

There are 4 sets you've got, right? You are drawing 1 from the first set, 1 from the second, 1 from the third, 1 from the fourth, then another 1 from the first...

If you change the order everything will be fine:

http://jsfiddle.net/muatT/

(lazily, I just copied the entire for-loop cruft as it was. You can probably simplify that code a lot)

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
  • Okay, so you did a separate loop for each ring. That’s sort of what I was trying to avoid, since it didn’t seem like it should be necessary—just draw one arc segment in each ring in every pass of the loop. Is there a reason why they need to be drawn in different loops? – Eric A. Meyer Jun 08 '12 at 19:44
  • Have a look at Andrew's fiddle for the real reason, here's the code with | 0 to round down: http://jsfiddle.net/xhHwe/. I'd suggest you give him the answer credit – Simon Sarris Jun 08 '12 at 19:57
  • Whoa — I’ve never seen the `| 0` operation before. Can you point me to a detailed explanation? I mean, I see what it does here but I’d like to read up on all its possibilities. And, as you might guess, trying to Google for `|` is fairly pointless. – Eric A. Meyer Jun 08 '12 at 20:04
  • It's the bitwise-or operator. It forces the lhs to be cast to a (32-bit) integer, which is then bitwise-or'd with the rhs. Or-ing with 0 is an identity function, so what you get back is just the lhs cast to a 32-bit integer. – Xanthir Jun 08 '12 at 20:11
  • There are different ways to floor floating point numbers, and bitwise OR is rather efficient. Here's a test I made looong ago: http://jsperf.com/bit-thingies. In short this techinque will work up to numbers as high as 2147483647 (aka a 32 bit integer), If the number is larger than that, it you will get junk data returned. – Simon Sarris Jun 08 '12 at 20:15
1

You can't use decimals for your RGB values, you need to round them.

http://jsfiddle.net/M6KbD/

Andrew
  • 13,757
  • 13
  • 66
  • 84
  • DOH! I was relying on browsers to handle improper values (as they do when I exceed the 0-255 range) and it bit me hard. That’s the fix I was after. Thank you! – Eric A. Meyer Jun 08 '12 at 20:01
  • Pretty much bites me every time I start a new canvas project. – Xanthir Jun 08 '12 at 20:12