Gradient suggestions

[r043v]

hi,

first, thank for this wonderfull editor :)

i was in trouble when using gradient, mainly due to gradient position is relative to the object center and not from the corner, maybe allowing the two origin could be great

please give back the ability to use % position :D

way of setting colors stop positions via keys names not allow multiple points at the same position,
when generating my color stop object i was forced to check key exist and add/remove 0.01 (also position is not capped to 1), allowing the definition via an array instead of an object would be pretty cool

last thing, css3 gradient allow the use of an angle instead of object perimeter position like here in canvas,
angle is much more easy to declare and switch from angle to perimeter isn't really trivial, natively allowing definition by an angle would be a great feature

i writed this conversion function :

function angle2rect(angle,sx,sy){
    while(angle < 0) angle += 360; angle %= 360;

    var a = sy, b = a+sx, c = b+sy, p = (sx+sy)*2, rp = p/360;
    var pp = parseInt( ( (angle*rp)+(sy/2) )%p ,10);

    if(pp <= a) return { x:0,  y:sy - pp };
    if(pp <= b) return { y:0,  x:pp - a  };
    if(pp <= c) return { x:sx, y:pp - b  };
                return { y:sy, x:sx - ( pp - c ) };
}

and here is a fiddle : http://jsfiddle.net/r043v/Z7Zg7/

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[kangax]

That's a pretty cool demo :)

I'm marking this ticket as "possible feature"

[kangax]

/cc @Kienz

[sandor]

@r043v – This is really a wonderful fiddle! But WAY to complicated for a novice like me... Could you make it happen to simplify this a bit? Let's say a rectangle and a slider control for rotating the gradients angle? Would be awesome!