Canvas 的默认大小为300像素×150像素（宽×高，像素的单位是px）。但是，可以使用HTML的高度和宽度属性来自定义Canvas 的尺寸。为了在 Canvas 上绘制图形，我们使用一个JavaScript上下文对象，它能动态创建图像。

2d渲染上下文和3d渲染上下文
getContext()

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

绘制一个红色的矩形

ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径。不过，我们拥有众多路径生成的方法让复杂图形的绘制成为了可能。

绘制矩形

fillRect(x, y, width, height)
绘制一个填充的矩形

strokeRect(x,y,width,height)
绘制一个矩形的边框

clearRect(x,y,width,height)
清除指定矩形区域，让清除部分完全透明

绘制路径

路径是通过不同颜色和宽度的线段或曲线相连形成的不同形状的点的集合。
路径是闭合的。

beginPath()

新建一条路径，生成之后，图形绘制命令被指向到路径上生成路径。

closePath()

闭合路径之后图形绘制命令又重新指向到上下文中。
这个不是必需的。这个方法会通过绘制一条从当前点到开始点的直线来闭合图形。如果图形是已经闭合了的，即当前点为开始点，该函数什么也不做。

stroke()

通过线条来绘制图形轮廓。

fill()

通过填充路径的内容区域生成实心的图形。

当你调用fill()函数时，所有没有闭合的形状都会自动闭合，所以你不需要调用closePath()函数。但是调用stroke()时不会自动闭合。

调用beginPath()之后，或者canvas刚建的时候，第一条路径构造命令通常被视为是moveTo（）,专门指定起始位置。

moveTo(x,y)

将笔触移动到指定的坐标上。

线

lineTo(x, y)

绘制一条从当前位置到指定x以及y位置的直线。

路径使用填充（fill）时，路径自动闭合，使用描边（stroke）则不会闭合路径。

圆弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)

画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，按照anticlockwise给定的方向（默认为顺时针）来生成。

startAngle以及endAngle参数用弧度定义了开始以及结束的弧度。这些都是以x轴为基准。参数anticlockwise为一个布尔值。为true时，是逆时针方向，否则顺时针方向。

给图形上色

fillStyle = color
设置图形的填充颜色

strokeStyle = color
设置图形轮廓的颜色

color 可以是表示 CSS 颜色值的字符串，渐变对象或者图案对象。

注意: 一旦您设置了 strokeStyle 或者 fillStyle 的值，那么这个新值就会成为新绘制的图形的默认值。如果你要给每个图形上不同的颜色，你需要重新设置 fillStyle 或 strokeStyle 的值。