I am trying to apply some natural transformations whereby the x axis is remapped to some very small domain, like from 0 to 1, whereas y is remapped to some small, but substantially larger domain, like 0 to 30. This way, drawing code can be nice and clean and only care about the model space. However, if I apply a scale, then lines are also scaled, which means that horizontal lines become extremely fat relative to vertical ones.
Here is some sample code. When natural_width is much less than natural_height the picture doesn't look as intended.
I want the picture to look like this, which is what happens with a scale that preserves aspect ratio:
However, with a non-aspect ratio preserving scale, the results look like this:
<html><head><title>Busted example</title></head>
<body>
<canvas id=example height=300 width=300>
<script>
var canvas = document.getElementById('example');
var ctx = canvas.getContext('2d');
var natural_width = 10;
var natural_height = 50;
ctx.scale(canvas.width / natural_width, canvas.height / natural_height);
var numLines = 20;
ctx.beginPath();
for (var i = 0; i < numLines; ++i) {
ctx.moveTo(natural_width / 2, natural_height / 2);
var angle = 2 * Math.PI * i / numLines;
// yay for screen size independent draw calls.
ctx.lineTo(natural_width / 2 + natural_width * Math.cos(angle),
natural_height / 2 + natural_height * Math.sin(angle));
}
ctx.stroke();
ctx.closePath();
</script>
</body>
</html>