Canvas width vs. clientWidth

HTML

<button id="changeButton">change</button>
<canvas id=test width=150></canvas>

CSS

canvas {
  background-color: #EEE;
  border: 1px solid black;
  padding: 10px;
  width: 300px;
}

JavaScript

function log(s) {
	var d = document.createElement('div');
  d.textContent = typeof s === 'string' ? s : JSON.stringify(s);
  document.body.appendChild(d);
}

var canvas = document.getElementById('test'),
	context = canvas.getContext('2d');

context.fillRect(0, 0, canvas.width, canvas.height);

log([canvas.width, canvas.clientWidth]);

var changeButton = document.getElementById('changeButton');
changeButton.addEventListener('click', function() {
  log([canvas.width, canvas.clientWidth]);
});