SOURCE

var lcl = document.getElementById("lcl");
var ctx = lcl.getContext('2d');
ctx.fillStyle = "#ff00ff";//绘制图形的填充颜色；
ctx.fillRect(0,0,100,20);//绘制图形的大小；从（0，0）开始绘制（100（宽），20（高））的矩形
ctx.moveTo(100,20);//绘制线条的起始位置
ctx.lineTo(200,50);//线条结束位置
ctx.stroke();//划线方法

<canvas id="lcl">
  <p>该浏览器不支持canvas</p>
</canvas>

canvas{
  width:300px;
  height:300px;
  border:1px solid blue;
}