html绘制渐变线问题

<canvas id="canvas" width="1" height="200"/>
<script type="text/javascript">
var c=document.getElementById("canvas");
var cxt=c.getContext("2d");
var gradient=cxt.createLinearGradient(105,150,0,canvas.height);
gradient.addColorStop(0,'#fff');
gradient.addColorStop(1,'#f00');
cxt.fillStyle=gradient;
cxt.fillRect(0,0,500,500);
</script>

绘制出的是纵向渐变，如果想要横向渐变的话怎么弄，并且怎么控制在浏览器上显示的位置？

1. <canvas id="canvas" width="1" height="200"/>改为<canvas id="canvas" width="200" height="1"/>既为横向渐变；

2. 增加c.style.marginTop = "100";//改变渐变线上位置100像素；c.style.marginLeft = "100";//改变左位置100像素。