Correctly clip content that has border-radius (#399)

niklasvh · Oct 7, 2014 · 5712b62 · 5712b62
1 parent 6073928
commit 5712b62
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 1 deletion.
diff --git a/dist/html2canvas.js b/dist/html2canvas.js
@@ -1821,7 +1821,9 @@ NodeParser.prototype.paintNode = function(container) {
 
     this.renderer.clip(container.clip, function() {
         this.renderer.renderBorders(container.borders.borders);
+    }, this);
 
+    this.renderer.clip(container.backgroundClip, function() {
         switch (container.node.nodeName) {
         case "svg":
         case "IFRAME":

diff --git a/dist/html2canvas.min.js b/dist/html2canvas.min.js
diff --git a/src/nodeparser.js b/src/nodeparser.js
@@ -281,7 +281,9 @@ NodeParser.prototype.paintNode = function(container) {
 
     this.renderer.clip(container.clip, function() {
         this.renderer.renderBorders(container.borders.borders);
+    }, this);
 
+    this.renderer.clip(container.backgroundClip, function() {
         switch (container.node.nodeName) {
         case "svg":
         case "IFRAME":

diff --git a/tests/cases/images/images.html b/tests/cases/images/images.html
@@ -9,6 +9,7 @@
     <img src="../../assets/image.jpg" />
     <img src="../../assets/image.jpg" style="width:50px;height:400px;" />
     <img src="../../assets/image.jpg" style="width:500px;"  />
+    <img src="../../assets/image.jpg" style="width:100px;border-radius:50px;"  />
     <img src="../../assets/image.jpg" style="width:500px;height:40px;" />