犀牛书一段话的理解-canvas width height

csdn上有一个帖子（http://bbs.csdn.net/topics/360033491），关于canvas HTML width height 和css width height之间区别的疑问，在犀牛书上的一段话有说明：

By default, a <canvas> is displayed on-screen at the size (in CSS pixels) specified by its HTML width and height attributes. Like any HTML element, however, a <canvas> element can have its on-screen size specified by CSS width and height style attributes. If you specify an on-screen size that is different than the actual dimensions of the canvas, the pixels of the canvas are automatically scaled as needed to fit the screen dimensions specified by the CSS attributes. The on-screen size of the canvas does not affect the number of CSS or hardware pixels reserved in the canvas bitmap and the scaling that is done is an image scaling operation. If the on-screen dimensions are substantially larger than the actual dimensions of the canvas, this results in pixelated graphics. This is an issue for graphic designers and does not affect canvas programming. 

大意是，<canvas>默认是以html width height在屏幕上显示，如下面的500和150

<canvas id="my_canvas_id" width=500 height=150></canvas>

但是，如果定义了css width height，那么屏幕显示即以css width height为准，原有图像会进行缩小或放大:

<style>
#my_canvas_id {
    width:100px;
    height:100px;
}
</style>

缩小：

如css width height远大于html width height,会看到明显的锯齿：

<style>
    #my_canvas_id {
        width:1000px;
        height:1000px;
     }
</style>