@@ -27,7 +27,7 @@ var reGradients = [
2727/*
2828 * TODO: Add IE10 vendor prefix (-ms) support
2929 * TODO: Add W3C gradient (linear-gradient) support
30- * TODO: Add old Webkit -webkit-gradient(radial, ...) support (new Chrome doesn´t support old syntax?!)
30+ * TODO: Add old Webkit -webkit-gradient(radial, ...) support
3131 * TODO: Maybe some RegExp optimizations are possible ;o)
3232 */
3333_html2canvas . Generate . parseGradient = function ( css , bounds ) {
@@ -115,7 +115,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) {
115115 case '-webkit-gradient' :
116116
117117 gradient = {
118- type : m1 [ 2 ] ,
118+ type : m1 [ 2 ] === 'radial' ? 'circle' : m1 [ 2 ] , // TODO: Add radial gradient support for older mozilla definitions
119119 x0 : 0 ,
120120 y0 : 0 ,
121121 x1 : 0 ,
@@ -396,17 +396,20 @@ _html2canvas.Generate.Gradient = function(src, bounds) {
396396
397397 ctxRadial . fillStyle = grad ;
398398 ctxRadial . fillRect ( 0 , 0 , di , di ) ;
399-
400- imgRadial = new Image ( ) ;
401- imgRadial . src = canvasRadial . toDataURL ( ) ;
402399
403- // transform circle to ellipse
404400 ctx . fillStyle = gradient . colorStops [ i - 1 ] . color ;
405401 ctx . fillRect ( 0 , 0 , canvas . width , canvas . height ) ;
406402
407- ctx . drawImage ( imgRadial , gradient . cx - gradient . rx , gradient . cy - gradient . ry , 2 * gradient . rx , 2 * gradient . ry ) ;
408-
409- img . src = canvas . toDataURL ( ) ;
403+ imgRadial = new Image ( ) ;
404+ imgRadial . onload = function ( ) { // wait until the image is filled
405+
406+ // transform circle to ellipse
407+ ctx . drawImage ( imgRadial , gradient . cx - gradient . rx , gradient . cy - gradient . ry , 2 * gradient . rx , 2 * gradient . ry ) ;
408+
409+ img . src = canvas . toDataURL ( ) ;
410+
411+ }
412+ imgRadial . src = canvasRadial . toDataURL ( ) ;
410413 }
411414 }
412415
0 commit comments