虽说支持canvas的浏览器都普遍允许在设定canvas元素的width和height属性的值带有px单位，但是从canvas规范来说，这样做是不对的。规范中说的是width和height的值只能够是一个非负整数。

设置尺寸无非就是通过利用width属性和height属性。问题是通过什么方式来设置属性的值，我们知道有元素内联形式设置和在外部css文件以及style标签内设置还有通过JavaScript修改。在这里需要指出的是：最不被推荐的做法就是使用外部文件以及style标签内设置canvas元素的尺寸。最为推荐的大概就是直接使用元素内联形式的方式了吧。

在默认情况下，浏览器所创建的canvas元素是300px像素宽，150px像素高。对于canvas元素来说，实际上它具有两套尺寸：一个是元素本身的尺寸，还有另一个是canvas元素绘图表面的尺寸。当我们使用元素内联形式来设置元素width和height的方法时，此时会被处理为同时把元素本身尺寸以及canvas元素绘图表面尺寸按照给定值给设置；但是如果你利用style标签内设置以及在外部css文件内设置的话，那么将会只设置canvas元素自身的尺寸，但是canvas元素绘图表面的尺寸此时并不会受到影响，所以他将会保持默认值也就是300的宽度以及150的高度。正是由于这样的不匹配导致了许多时候出现错位的问题。而通过利用JavaScript来设置canvas的尺寸的时候，貌似就是即设置了canvas元素自身的尺寸以及设置了canvas元素的绘图表面的尺寸。为什么说貌似呢？这样一种情况：假设此时canvas元素自身的尺寸和canvas元素的绘图表面的尺寸并不相同，如果我们通过JavaScript代码canvasEle.width/height来获取canvas尺寸的时候，返回的是canvas元素绘图表面的尺寸。但是如果我们通过js设置尺寸的时候，canvas所呈现的效果又和直接在元素之中内联设置没有什么两样。

下面下面将用实例介绍一哈三种设置方法的微妙不同点：

• 1.首先是通过最为推荐的方式设置——元素内联的形式设置canvas的尺寸，使用这种方法的时候同时设置了canvas元素自身的尺寸以及canvas元素的绘图表面的尺寸。其效果如图所示：内联形式demo

• 2.第二种方法是利用JavaScript修改canvasEle.width/height，利用这种方法修改所得到的效果和直接使用元素内联的形式很相像。其效果如下所示：javascript修改demo

• 3.第三种方法是利用style标签或者外外部样式表中修改的方法，利用这种方法时只会修改canvas元素自身的尺寸，并不会修改canvas元素的绘图表面的尺寸，所以后者的尺寸是默认值300x150，但是由于此时两者不匹配，所以绘图表面会做一个妥协，他会进行拉伸操作。demo效果

END