[css4-color] Make the r/g/b components be <number> rather than <integer>?

Could we make the rgb components of rgb/a() be <number> rather than
<integer> in level 4?

When hand-authoring, there's no difference - you'd never write a
decimal knowingly.  However, when creating colors via scripting for
anything that uses CSS colors, such as setting the fillStyle on a
<canvas> 2d context, it's very easy to generate non-integer components
and forget to round them.

I make this error pretty much every time I start a new canvas-based
project.  Here's another example of someone being bitten by it:
http://stackoverflow.com/questions/10954761/how-do-i-get-new-canvas-arc-stroke-styles
(the error was that the components were only integers every fourth
iteration through the loop, so for the other three iterations it
stayed with the last valid color set - the blue/black inner ring - and
produced some very confusing-looking output).

For future generations, here's the page in question, as his problem
was solved and it'll probably change to remove the error:

data:text/html;charset=utf-8,%0A<!DOCTYPE%20html>%0A<title>CSS%20colors%3A%20HSL%20from%20RGB<%2Ftitle>%0A<script>%0Awindow.onload%20%3D%20function()%20%7B%0A%09%2F%2F%20Parameters%0A%09var%20saturation%20%3D%20100%3B%0A%09var%20lightness%20%3D%2050%3B%0A%09var%20radius%20%3D%20180%3B%0A%09var%20canvas%20%3D%20850%3B%0A%09var%20centerx%20%3D%20300%3B%0A%09var%20centery%20%3D%20300%3B%0A%09var%20redstart%20%3D%20Math.PI%20%2F%202%3B%0A%09%2F%2F%20Render%0A%09var%20canvas%20%3D%20document.querySelector('canvas')%3B%0A%09var%20ctx%20%3D%20canvas.getContext('2d')%3B%0A%09for(i%3D0%3Bi<%3D360%3B%2B%2Bi)%20%7B%0A%09%09var%20diffr%20%3D%20i%3B%0A%09%09var%20diffg%20%3D%20Math.abs(i%20-%20120)%3B%0A%09%09var%20diffb%20%3D%20Math.abs(i%20-%20240)%3B%0A%09%09var%20red%20%3D%20(Math.abs(180%20-%20diffr)%20*%204.25)%20-%20255%3B%0A%09%09var%20green%20%3D%20(Math.abs(180%20-%20diffg)%20*%204.25)%20-%20255%3B%0A%09%09var%20blue%20%3D%20(Math.abs(180%20-%20diffb)%20*%204.25)%20-%20255%3B%0A%09%09var%20startAngle%20%3D%20((i%2B1)%20*%20Math.PI%2F180)%20-%20redstart%3B%0A%09%09var%20endAngle%20%3D%20((i-1)%20*%20Math.PI%2F180)%20-%20redstart%3B%0A%0A%09%09ctx.beginPath()%3B%20ctx.strokeStyle%20%3D%20'rgb('%2Bred%2B'%2C%20'%2Bgreen%2B'%2C%20'%2Bblue%2B')'%3B%20ctx.lineWidth%20%3D%20100%3B%20ctx.arc(centerx%2Ccentery%2Cradius%2CstartAngle%2CendAngle%2Ctrue)%3B%20ctx.stroke()%3B%0A%09%09ctx.beginPath()%3B%20ctx.strokeStyle%20%3D%20'rgb('%2Bred%2B'%2C%200%2C%200)'%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.lineWidth%20%3D%2025%3B%20%20ctx.arc(centerx%2Ccentery%2C115%2CstartAngle%2CendAngle%2Ctrue)%3B%20%20%20%20ctx.stroke()%3B%0A%09%09ctx.beginPath()%3B%20ctx.strokeStyle%20%3D%20'rgb(0%2C%20'%2Bgreen%2B'%2C%200)'%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.lineWidth%20%3D%2025%3B%20%20ctx.arc(centerx%2Ccentery%2C87%2CstartAngle%2CendAngle%2Ctrue)%3B%20%20%20%20%20ctx.stroke()%3B%0A%09%09ctx.beginPath()%3B%20ctx.strokeStyle%20%3D%20'rgb(0%2C%200%2C%20'%2Bblue%2B')'%3B%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20ctx.lineWidth%20%3D%2025%3B%20%20ctx.arc(centerx%2Ccentery%2C59%2CstartAngle%2CendAngle%2Ctrue)%3B%20%20%20%20%20ctx.stroke()%3B%0A%0A%09%7D%0A%7D%0A<%2Fscript>%0A<h2>Getting%20HSL%20from%20RGB<%2Fh2>%0A<canvas%20width%3D"700"%20height%3D"800"><%2Fcanvas>

I suggest we cast the components to integers in the same way we did
for Transitions - normal round, .5 goes toward positive infinity.

~TJ

Received on Friday, 8 June 2012 20:21:22 UTC