aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorNivesh Rajbhandari2012-04-25 13:36:41 -0700
committerNivesh Rajbhandari2012-04-25 13:36:41 -0700
commitb183dbb1d5efef5db0ba3f8004b674b63b66b76a (patch)
tree76202b40019ea68330b8c5453d10ab2eac05f8f9
parent32a24988add5ba0ecf80caa31871cdd90e3eea5b (diff)
downloadninja-b183dbb1d5efef5db0ba3f8004b674b63b66b76a.tar.gz
Changing canvas-2d gradient drawing to more closely match div's background-image gradient support.
Signed-off-by: Nivesh Rajbhandari <mqg734@motorola.com>
-rwxr-xr-xjs/lib/geom/circle.js4
-rwxr-xr-xjs/lib/geom/rectangle.js10
2 files changed, 7 insertions, 7 deletions
diff --git a/js/lib/geom/circle.js b/js/lib/geom/circle.js
index 1073c2db..218dcfa6 100755
--- a/js/lib/geom/circle.js
+++ b/js/lib/geom/circle.js
@@ -457,9 +457,9 @@ var Circle = function GLCircle() {
457 if(this._fillColor.gradientMode) { 457 if(this._fillColor.gradientMode) {
458 if(this._fillColor.gradientMode === "radial") { 458 if(this._fillColor.gradientMode === "radial") {
459 gradient = ctx.createRadialGradient(xCtr, yCtr, 0, 459 gradient = ctx.createRadialGradient(xCtr, yCtr, 0,
460 xCtr, yCtr, Math.max(yScale, xScale)); 460 xCtr, yCtr, Math.max(this._width, this._height)/2);
461 } else { 461 } else {
462 gradient = ctx.createLinearGradient(0, this._height/2, this._width, this._height/2); 462 gradient = ctx.createLinearGradient(lineWidth/2, this._height/2, this._width-lineWidth, this._height/2);
463 } 463 }
464 colors = this._fillColor.color; 464 colors = this._fillColor.color;
465 465
diff --git a/js/lib/geom/rectangle.js b/js/lib/geom/rectangle.js
index 91b1d426..8278f1a3 100755
--- a/js/lib/geom/rectangle.js
+++ b/js/lib/geom/rectangle.js
@@ -452,13 +452,13 @@ var Rectangle = function GLRectangle() {
452 // render the fill 452 // render the fill
453 ctx.beginPath(); 453 ctx.beginPath();
454 if (this._fillColor) { 454 if (this._fillColor) {
455 inset = Math.ceil( lw ) + 0.5; 455 inset = Math.ceil( lw );
456 456
457 if(this._fillColor.gradientMode) { 457 if(this._fillColor.gradientMode) {
458 if(this._fillColor.gradientMode === "radial") { 458 if(this._fillColor.gradientMode === "radial") {
459 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w/2, h/2)-inset); 459 gradient = ctx.createRadialGradient(w/2, h/2, 0, w/2, h/2, Math.max(w, h)/2);
460 } else { 460 } else {
461 gradient = ctx.createLinearGradient(inset, h/2, w-2*inset, h/2); 461 gradient = ctx.createLinearGradient(inset/2, h/2, w-inset, h/2);
462 } 462 }
463 colors = this._fillColor.color; 463 colors = this._fillColor.color;
464 464
@@ -486,11 +486,11 @@ var Rectangle = function GLRectangle() {
486 // render the stroke 486 // render the stroke
487 ctx.beginPath(); 487 ctx.beginPath();
488 if (this._strokeColor) { 488 if (this._strokeColor) {
489 inset = Math.ceil( 0.5*lw ) + 0.5; 489 inset = Math.ceil( 0.5*lw );
490 490
491 if(this._strokeColor.gradientMode) { 491 if(this._strokeColor.gradientMode) {
492 if(this._strokeColor.gradientMode === "radial") { 492 if(this._strokeColor.gradientMode === "radial") {
493 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h/2, w/2)-inset, w/2, h/2, Math.max(h/2, w/2)); 493 gradient = ctx.createRadialGradient(w/2, h/2, Math.min(h, w)/2-inset, w/2, h/2, Math.max(h, w)/2);
494 } else { 494 } else {
495 gradient = ctx.createLinearGradient(0, h/2, w, h/2); 495 gradient = ctx.createLinearGradient(0, h/2, w, h/2);
496 } 496 }