SOURCE

var drawing = document.getElementById("drawing");

//确认浏览器支持canvas元素
if (drawing.getContext){
  var context = drawing.getContext("2d");
  
  //绘制红色矩形
  context.fillStyle = "#ff0000";
  context.fillRect(10,10,100,50);
  
  //绘制蓝色矩形
  context.fillStyle = "rgba(0,0,225,0.5)";
  context.fillRect(60,30,100,50);
}

<canvas id = "drawing">
  a drawing of rectangle!
</canvas>

#drawing{
  width:200px;
  height:200px;
}