Languages of the real and artificial - Latest Comments in JavaScript Gradient Roundrects

Re: JavaScript Gradient Roundrects

Gobinath Mallaiyan — Tue, 08 Jan 2008 08:49:41 -0000

is there way where i can add border

Re: JavaScript Gradient Roundrects

Jean-Francois Bouzereau — Mon, 19 Nov 2007 09:13:46 -0000

Hello,

I'm quite aware that CSS styles are preferably used with DEV elements, but I wanted to use roundrects in html table. Unfortunately the result is wrong, the roundrect is positionned in absolute coordinates 0,0, both in firefox and safari on mac. You can see my test page and the corresponding screen dumps here :

http://membres.lycos.fr/jfb...

Thanks in advance for any ideas ...

Cheers.

Re: JavaScript Gradient Roundrects

Norm Fox — Tue, 11 Sep 2007 19:47:22 -0000

useful tool thanks.

altering the createCanvasGradient function as follows will allow you to pass a 'direction' parm via the enhanced style.
possible values are:: 'horizontal', 'vertical', 'diagonal-down', 'diagonal-up'

OSGradient.prototype.createCanvasGradient = function(e, width, height) {

var canvas = document.createElement('canvas');
var ctx;
// Return null if canvas isn't supported. The caller will
// fall back on divs.
try {ctx = canvas.getContext('2d')} catch (e) {return null}

// Safari requires the following prior to rendering
e.appendChild(canvas);
if (navigator.appVersion.match(/Konqueror|Safari|KHTML/))
canvas.style.position = 'fixed';
canvas.setAttribute('width', width);
canvas.setAttribute('height', height);

var style = this.style;
var c0 = style['gradient-start-color'];
var c1 = style['gradient-end-color'];
var r = style['border-radius'];
var direction = style['direction'];

ctx.beginPath();
ctx.moveTo(0,r);
//arcTo() produces NS_ERROR_NOT_IMPLEMENT in Firefox 1.5; use arc() instead:
//ctx.arcTo(0,0,r,0,r);
ctx.arc(r,r,r,Math.PI,-Math.PI/2,false);
ctx.lineTo(width-r,0);
//ctx.arcTo(width,0,width,r,r);
ctx.arc(width-r,r,r,-Math.PI/2,0,false);
ctx.lineTo(width,height-r);
//ctx.arcTo(width,height,width-r,height,r);
ctx.arc(width-r,height-r,r,0,Math.PI/2,false);
ctx.lineTo(r,height);
//ctx.arcTo(0,height,0,height-r,r);
ctx.arc(r,height-r,r,Math.PI/2,Math.PI,false);
ctx.clip();

switch (direction){
case "vertical":
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
break;
case "horizontal":
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,0);
break;
case "diagonal-down":
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,width,height);
break;
case "diagonal-up":
var g = ctx.fillStyle = ctx.createLinearGradient(0,height,width,0);
break;
default: //maintain backwards compatibility with code not passing direction parm
var g = ctx.fillStyle = ctx.createLinearGradient(0,0,0,height);
break;

}

g.addColorStop(0, OSUtils.color.long2css(c0));
g.addColorStop(1, OSUtils.color.long2css(c1));
ctx.rect(0,0,width,height);
ctx.fill();

return canvas;
};

Cheers

Re: JavaScript Gradient Roundrects

Norman Harebottle — Fri, 13 Apr 2007 18:36:03 -0000

I just ran across your gradient and rounded corners implementation and it looks really good. To be honest, I have not looked through the JavaScript intently yet, but I am wondering if there is not a fairly easy way to make the gradient a horizontal gradient as opposed to the current vertical gradient?

Re: JavaScript Gradient Roundrects

aqeel ahmed — Tue, 15 Aug 2006 03:58:09 -0000

hi love your code and stuff but is it possible t print the gradient horizontally left to right.....very much appreciated your code and effort u put in it.....

thanks
aqeel ahmed