свойства canvas.width|height - Это разрешение канваса в пикселах, а canvas.
style.width|height - просто размеры.
Если canvas.style.width|height не заданы, то размеры канвы совпадают с цифрами canvas.width|height (которые если не заданы равны 300х200)
<canvas style = "border: 1px solid red; width: 100px; height : 150px;" id = ":cnv" width = "10" height = "10"></canvas>
<script type = "text/javascript">
var cnx = document.getElementById(":cnv").getContext("2d");
cnx.fillRect(2,2,6,6); //6x6px выглядит не квадратным так как отношение width/height не совпадает с style.width/style.height
</script>
Если надо например следить за кликами на канве, то свойства width и height должны совпадать с одноименными стилевыми (например по клику нужно поставить точку в этом месте), иначе проецироваться все будет не корректно