var ctx;

var startGrad1, endGrad1, startGrad2, endGrad2;

​

function setup() {

  var myCanvas = createCanvas(500, 500);

  myCanvas.parent("myCanvas");

  ctx = myCanvas.drawingContext;

}

​

function draw() {

  background('#0575E6');

​

  var xRect = 0;

  var yRect = 40;

  var sizeRect = 200;

​

  startGrad1 = createVector(xRect, yRect + sizeRect)

  endGrad1 = createVector(xRect + sizeRect, yRect)

​

  var xEllipse = 200;

  var yEllipse = 360;

  var sizeEllipse = 100;

​

  startGrad2 = createVector(xEllipse - sizeEllipse / 2, yEllipse + sizeEllipse / 2);

  endGrad2 = createVector(xEllipse + sizeEllipse / 2, yEllipse - sizeEllipse / 2);

​

  //ellipse

  var gradient2 = ctx.createLinearGradient(startGrad2.x, startGrad2.y, endGrad2.x, endGrad2.y);

  gradient2.addColorStop(0, "rgba(253, 119, 146,0.1)");

  gradient2.addColorStop(1, "#FFCC00");

  ctx.beginPath();

  ctx.ellipse(xEllipse, yEllipse, sizeEllipse, sizeEllipse, 45 * Math.PI / 180, 0, 2 * Math.PI);

  ctx.fillStyle = gradient2;

  ctx.fill();

}