CSS dimensions vs. HTML dimensions

Why CSS dimensions and HTML dimensions affect the rendered path differently

HTML

<canvas id="trial" width="100" height="100" style="width: 100%; height: 100%; border: 1px solid black;"></canvas>

JavaScript

$(document).ready(function() {

	function highlightAreaTrial(elementId, x, y, radius) {
		console.log("x, y: " + x + ", " + y);
		canvas = document.getElementById(elementId);
		ctx = canvas.getContext('2d');
		ctx.beginPath();
		ctx.arc(x, y, radius, 0, 2*Math.PI);
		ctx.strokeStyle="#FF0000";
		ctx.stroke();
	}

	highlightAreaTrial("trial", 50, 50, 20);

});