var cc = document.getElementById('mycanvas');
var ctx = cc.getContext('2d');
// 绘制填充的矩形x,y,w,h
// ctx.fillStyle = 'red';
// ctx.fillRect(1,1,100,100);
// 矩形边框
// ctx.strokeStyle = '#fff';
// ctx.strokeRect(0,0,101,101);
// 清楚矩形区域
// ctx.clearRect(100,100,20,30);
// 绘制直线形状
// ctx.beginPath(); // 开始
// ctx.moveTo(250,50); //确定起点
// ctx.lineTo(250,200); //连线
// ctx.lineTo(300,150);
// ctx.fill(); //填充
// ctx.closePath(); // 关闭
// 绘制弧型形状
// arc(x,y,r,start,end,isAnti) r-圆半径 2*Math.PI 为一个圆，isAnti是否逆时针
// ctx.beginPath();
// ctx.arc(150,150,50,0,2*Math.PI);
// ctx.strokeStyle = '#eee';
// ctx.stroke();
// ctx.fill();
// ctx.closePath();
<canvas id="mycanvas" width="300" height="200">
</canvas>
canvas{
}