<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
		
square(10,10,100,100,255,0,0,0,0,255);
	
square(150,100,50,50,255,0,255,0,255,0);

square(200,50,50,50,0,255,255,255,255,0);
	
	function square(x, y, w, h, R, G, B, R1, G1, B1) {
		
			context.beginPath();
			context.rect(x, y, w, h);
			
			var color = "rgb("+R+","+G+","+B+")";
			var color1 = "rgb("+R1+","+G1+","+B1+")";
			var grd = context.createLinearGradient(x, y, x+w, y+h);
			grd.addColorStop(0, color);
			grd.addColorStop(1, color1);
			context.fillStyle = grd;
			context.fill();
			context.closePath();
	}

};

</script>