Html2canvas: Linear-Gradient with Angle (0deg) not rendering

Created on 11 Mar 2013 · 8Comments · Source: niklasvh/html2canvas

Hi !

First of all, nice plugin here ! I just needed something like that ;)

I just have a question about gradient.

Gradients are rendered when the angle is specified with a word (Top, Left, ...), but not when I put an angle in Degree (For exemple : linear-gradient(0deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%) won't work).

Is there a way to fix this ? Because I use a lot of gradients with degrees values :)

Thanks !

Bug

Source

nammu

All 8 comments

Thanks for the info.

There is a way to fix it, but I currently don't have the time for it. I'll add it to the backlog and get back to it when I do have the time.

niklasvh on 14 Mar 2013

Probably, none of the gradients work.
We are using a different notation than the 0-deg: linear-gradient(to bottom, color, color);

oosterholt on 18 Jul 2013

Is there any updates on this @niklasvh, I am facing same problem.

abhasg on 8 Apr 2014

+1 to resolve this issue. @niklasvh can you give us a clue to try to resolve this?

fbotti on 19 Jun 2014

There is a simple fix for this just add this if before existing the position switch in the LinearGradientContainer

if (imageData.args[0].indexOf('deg') != -1) {
  var rad = parseFloat(imageData.args[0].substr(0, imageData.args[0].length - 3)) * (Math.PI / 180);
  //Finds y start and scales it between 0 and 1
  this.y0 = (Math.cos(rad) + 1) / 2;
  //Flips y1
  this.y1 = 1 - this.y0;
  //Same as for y0 but flip axis to match with css gradient
  this.x0 = (-Math.sin(rad) + 1) / 2;
  this.x1 = 1 - this.x0;
} else {
  imageData.args[0].split(" ").reverse().forEach(function(position) {
     switch (position) {
          ........
     }
}