border-radius parsing

Author: niklasvh

src/Core.js

@@ -120,6 +120,14 @@ _html2canvas.Util.getCSS = function (el, attribute) {
             val[ 0 ] = ( val[0].indexOf( "%" ) === -1 ) ? toPX(  attribute + "X", val[ 0 ] ) : val[ 0 ];
             val[ 1 ] = ( val[1] === undefined ) ? val[0] : val[1]; // IE 9 doesn't return double digit always
             val[ 1 ] = ( val[1].indexOf( "%" ) === -1 ) ? toPX(  attribute + "Y", val[ 1 ] ) : val[ 1 ];
+        } else if ( /border(Top|Bottom)(Left|Right)Radius/.test( attribute) ) {
+            var arr = val.split(" ");
+            if ( arr.length <= 1 ) {
+                arr[ 1 ] = arr[ 0 ];
+            }
+            arr[ 0 ] = parseInt( arr[ 0 ], 10 );
+            arr[ 1 ] = parseInt( arr[ 1 ], 10 );
+            val = arr;
         }
 
     } else if ( el.currentStyle ) {

src/Parse.js

@@ -619,6 +619,7 @@ _html2canvas.Parse = function ( images, options ) {
         by,
         bw,
         bh,
+        i,
         borderArgs,
         borderBounds,
         borders = (function(el){
@@ -636,9 +637,10 @@ _html2canvas.Parse = function ( images, options ) {
             return borders;
 
         }(el)),
+        // http://www.w3.org/TR/css3-background/#the-border-radius
         borderRadius = (function( el ) {
             var borders = [],
-            sides = ["TopLeft","TopRight","BottomLeft","BottomRight"],
+            sides = ["TopLeft","TopRight","BottomRight","BottomLeft"],
             s;
 
             for (s = 0; s < 4; s+=1){
@@ -664,42 +666,47 @@ _html2canvas.Parse = function ( images, options ) {
                         // top border
                         bh = borders[0].width;
 
-                        borderArgs[ 0 ] = [ bx, by ];  // top left
-                        borderArgs[ 1 ] = [ bx + bw, by ]; // top right
-                        borderArgs[ 2 ] = [ bx + bw - borders[ 1 ].width, by + bh  ]; // bottom right
-                        borderArgs[ 3 ] = [ bx + borders[ 3 ].width, by + bh ]; // bottom left
+                        i = 0;
+                        borderArgs[ i++ ] = [ "line", bx, by ];  // top left
+                        borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
+                        borderArgs[ i++ ] = [ "line", bx + bw - borders[ 1 ].width, by + bh  ]; // bottom right
+                        borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by + bh ]; // bottom left
 
                         break;
                     case 1:
                         // right border
                         bx = x + w - (borders[1].width);
                         bw = borders[1].width;
 
-                        borderArgs[ 0 ] = [ bx, by + borders[ 0 ].width];  // top left
-                        borderArgs[ 1 ] = [ bx + bw, by ]; // top right
-                        borderArgs[ 2 ] = [ bx + bw, by + bh + borders[ 2 ].width ]; // bottom right
-                        borderArgs[ 3 ] = [ bx, by + bh ]; // bottom left
+                        i = 0;
+                        borderArgs[ i++ ] = [ "line", bx, by + borders[ 0 ].width];  // top left
+                        borderArgs[ i++ ] = [ "line", bx + bw, by ]; // top right
+                        borderArgs[ i++ ] = [ "line", bx + bw, by + bh + borders[ 2 ].width ]; // bottom right
+                        borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left
 
                         break;
                     case 2:
                         // bottom border
                         by = (by + h) - (borders[2].width);
                         bh = borders[2].width;
-                                                   
-                        borderArgs[ 0 ] = [ bx + borders[ 3 ].width, by ];  // top left
-                        borderArgs[ 1 ] = [ bx + bw - borders[ 2 ].width, by ]; // top right
-                        borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right
-                        borderArgs[ 3 ] = [ bx, by + bh ]; // bottom left
+                                             
+                                    
+                        i = 0;
+                        borderArgs[ i++ ] = [ "line", bx + borders[ 3 ].width, by ];  // top left
+                        borderArgs[ i++ ] = [ "line", bx + bw - borders[ 2 ].width, by ]; // top right
+                        borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right
+                        borderArgs[ i++ ] = [ "line", bx, by + bh ]; // bottom left
 
                         break;
                     case 3:
                         // left border
                         bw = borders[3].width;
 
-                        borderArgs[ 0 ] = [ bx, by ];  // top left
-                        borderArgs[ 1 ] = [ bx + bw, by + borders[ 0 ].width ]; // top right
-                        borderArgs[ 2 ] = [ bx + bw, by + bh ]; // bottom right
-                        borderArgs[ 3 ] = [ bx, by + bh + borders[ 2 ].width ]; // bottom left
+                        i = 0;
+                        borderArgs[ i++ ] = [ "line", bx, by ];  // top left
+                        borderArgs[ i++ ] = [ "line", bx + bw, by + borders[ 0 ].width ]; // top right
+                        borderArgs[ i++ ] = [ "line", bx + bw, by + bh ]; // bottom right
+                        borderArgs[ i++ ] = [ "line", bx, by + bh + borders[ 2 ].width ]; // bottom left
 
                         break;
                 }
@@ -721,12 +728,13 @@ _html2canvas.Parse = function ( images, options ) {
                     if ( borderData.color !== "transparent" ){
                         ctx.setVariable( "fillStyle", borderData.color );
 
-                        var shape = ctx.drawShape();
-                        shape.moveTo.apply( null, borderArgs[ 0 ] ); // top left
-                        shape.lineTo.apply( null, borderArgs[ 1 ] ); // top right 
-                        shape.lineTo.apply( null, borderArgs[ 2 ] ); // bottom right 
-                        shape.lineTo.apply( null, borderArgs[ 3 ] ); // bottom left 
-                        // ctx.fillRect (x, y, w, h);
+                        var shape = ctx.drawShape(),
+                        numBorderArgs = borderArgs.length;
+                        
+                        for ( i = 0; i < numBorderArgs; i++ ) {
+                            shape[( i === 0) ? "moveTo" : borderArgs[ i ][ 0 ] + "To" ].apply( null, borderArgs[ i ].slice(1) );
+                        }
+
                         numDraws+=1;
                     }
 

tests/borders.html

@@ -37,11 +37,11 @@
                 height: 201px;
                 top: 20px;
                 left: 170px;
-                border: 20px dotted #990000;
+                border: 20px solid #990000;
                 background-color: #ffdddd;
                 text-align: center;
-
-                border-top-color: blue;
+                border-radius: 50px/160px;
+                border-left-color: violet;
                 border-top-width:0px;
             }