CSS dimensions vs. HTML dimensions

Why CSS dimensions and HTML dimensions affect the rendered path differently

by Baggio Wong

HTML

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

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></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);
  highlightAreaTrial("myCanvas", 50, 50, 20);

});