From 106b5ff214e3a2a8302987f77296d2ed110995c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9=20Fiedler?= Date: Sun, 11 Mar 2012 17:12:24 +0000 Subject: [PATCH] "fixed circle gradient generation - image loading bug" --- src/Generate.js | 21 ++++++++++++--------- 1 file changed, 12 insertions(+), 9 deletions(-) diff --git a/src/Generate.js b/src/Generate.js index e9841cc..3dfa3c1 100644 --- a/src/Generate.js +++ b/src/Generate.js @@ -27,7 +27,7 @@ var reGradients = [ /* * TODO: Add IE10 vendor prefix (-ms) support * TODO: Add W3C gradient (linear-gradient) support - * TODO: Add old Webkit -webkit-gradient(radial, ...) support (new Chrome doesn´t support old syntax?!) + * TODO: Add old Webkit -webkit-gradient(radial, ...) support * TODO: Maybe some RegExp optimizations are possible ;o) */ _html2canvas.Generate.parseGradient = function(css, bounds) { @@ -115,7 +115,7 @@ _html2canvas.Generate.parseGradient = function(css, bounds) { case '-webkit-gradient': gradient = { - type: m1[2], + type: m1[2] === 'radial' ? 'circle' : m1[2], // TODO: Add radial gradient support for older mozilla definitions x0: 0, y0: 0, x1: 0, @@ -396,17 +396,20 @@ _html2canvas.Generate.Gradient = function(src, bounds) { ctxRadial.fillStyle = grad; ctxRadial.fillRect(0, 0, di, di); - - imgRadial = new Image(); - imgRadial.src = canvasRadial.toDataURL(); - // transform circle to ellipse ctx.fillStyle = gradient.colorStops[i - 1].color; ctx.fillRect(0, 0, canvas.width, canvas.height); - ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry); - - img.src = canvas.toDataURL(); + imgRadial = new Image(); + imgRadial.onload = function() { // wait until the image is filled + + // transform circle to ellipse + ctx.drawImage(imgRadial, gradient.cx - gradient.rx, gradient.cy - gradient.ry, 2 * gradient.rx, 2 * gradient.ry); + + img.src = canvas.toDataURL(); + + } + imgRadial.src = canvasRadial.toDataURL(); } }