在canvas中使用createLinearGradient时出现问题

Question

我在画布中遇到线性渐变问题。

我正在尝试在点击屏幕中的某个位置后创建动态画布元素并为其设置动画，但它在桌面上工作但如果我使用ctx.createLinearGradient填充它似乎不适用于Mobile（chrome）创建的圆圈。

var circle = new Circle(circleProp);//circleProp is all propertys for new circle

function onMenuClick(e){
  e.preventDefault();
  e.stopPropagation();

  var posX = e.pageX || e.changedTouches[0].pageX;
  var posY = e.pageY || e.changedTouches[0].pageY;

  if(menuToggle){

    circle.paint(usrAllCont);// here is ewerything to make it work;

    usrMenu.style.display = "block";
    usrMenu.style.zIndex = "100";
    usrMenu.opacity();

    menuToggle = false;
  }else{

    usrMenu.opacity();
    menuToggle = true;

    circle.paint(usrAllCont);// here is ewerything to make it work back;
  }
}

谢谢！

[在评论中包含提问者的测试代码]

var Circle = function(prop){
  this.width = prop.width;
  this.height = prop.height;
  this.r = prop.r;
  this.halfR = this.r / 2;
  this.step = this.r / 30;
  this.currentStep = this.r / 30;
  this.inProcesStep;
  this.x = prop.defX;
  this.y = prop.defY;

  this.anim = true;
  this.toggleAnim = false;
  this.resize = false;
  this.direction = "front";

  this.canvas = document.createElement("canvas");
  this.ctx = this.canvas.getContext("2d");
  this.canvas.width = this.width;
  this.canvas.height = this.height;
  this.canvas.style.position = "absolute";
  this.canvas.style.top = "0px";

  //this.color = "rgb(25,245,170)"

  this.gradient = this.ctx.createLinearGradient(0,0, 0, prop.height);
  this.gradient.addColorStop(0,"rgb(100,150,250");
  this.gradient.addColorStop(1,"rgb(0,250,250");

};
Circle.prototype.paint = function(parent){
  this.parent = parent;
  this.parent.appendChild(this.canvas);

  var ctx = this.ctx;
  ctx.fillStyle = this.gradient;
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.halfR ,0 ,2*Math.PI);
  ctx.fill();

};


var w = document.documentElement.clientWidth;
var h = window.screen.height;
var radius = function(width, height){
  var sum = Math.pow(width, 2) + Math.pow(height, 2);
  return Math.sqrt(sum);
};
var conteiner = document.getElementById("conteiner");
var btn = document.getElementById("btn");
btn.addEventListener("click", onBtnClick);
btn.addEventListener("touchend", onBtnClick);

var circleProp = {
  width: w,
  height: h,
  r: radius(w, h),
  defX: 25,
  defY: 25
};
var circle = new Circle(circleProp);

function onBtnClick(e){
  e.preventDefault();
  e.stopPropagation();

  var posX = e.pageX || e.changedTouches[0].pageX;
  var posY = e.pageY || e.changedTouches[0].pageY;

  circle.paint(conteiner);
}

<div id="btn">click me</div>
<div id="conteiner"></div>