Canvas gradient & pattern

by MICHI CHEN

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JavaScript

$(function(){
	var cxt=$('#myCanvas')[0].getContext('2d');
  
  cxt.beginPath();
  cxt.moveTo(100,50);
  cxt.bezierCurveTo(120,0,140,0,135,50);
  cxt.bezierCurveTo(170,10,180,20,190,50);
  cxt.bezierCurveTo(250,10,300,20,290,70);
  cxt.bezierCurveTo(350,70,360,130,300,130);
  cxt.bezierCurveTo(300,200,250,190,200,150);
  cxt.bezierCurveTo(150,200,100,200,120,130);
  cxt.bezierCurveTo(50,100,0,20,100,50);
  cxt.closePath();
  var img=new Image();
  img.src='https://c1.staticflickr.com/1/359/18606422976_a1fa874e07_k.jpg';
  var pattern=cxt.createPattern(img,'no-repeat');
  cxt.fillStyle=pattern;
  cxt.fill();
  cxt.stroke();
  
  cxt.beginPath();
  cxt.rect(10,200,300,50);
  var grd=cxt.createLinearGradient(10,200,300,50);
  grd.addColorStop(0,'yellow');
  grd.addColorStop(1,'red');
  cxt.fillStyle=grd;
  cxt.fill();
  
  cxt.beginPath();
  cxt.arc(60,330,50,0,Math.PI,true);
  cxt.closePath();
  var rGrd=cxt.createRadialGradient(60,330,0,60,330,50);
	rGrd.addColorStop(0,"yellow");
	rGrd.addColorStop(1,"red");
  cxt.fillStyle=rGrd;
  cxt.fill()
  cxt.stroke();
});