Why is my radial grid map zoomed in so much?

Question

On my test page, [link removed], there is supposed to be a series of lines radiating from the top-right corner of the square (the left vertical rectangle is a sidebar that will be used for something unrelated). Using the top-right as the origin of a polar map, the lines go from theta = pi to 3pi/2.

However, it appears the canvas is zoomed in, as all I (and a friend of mine) can see are a few large, blurry lines, like it's zoomed in to the top-left. There is no scaling going on, and I'm using jCanvas, a jQuery plugin for the Canvas object. And if I output the coordinates, they line up with what they should be, when I plot it down on paper.

What could the problem be?

This is my code:

<script>

var gradations_theta, theta, this_x1, this_y1, this_x2, this_y2, start_r, end_r;
gradations_theta = 24;
start_r = 20;   // 20 pixels from center of galaxy
end_r  = 800;   // 800 pixels from center of galaxy (to corners west and south of center)

$(function() {
    for (theta = Math.PI; theta <= (Math.PI * 3 / 2); theta += (Math.PI / (gradations_theta * 2))) {

        this_x1 = Math.floor(800 + (start_r * Math.cos(theta)));
        this_y1 = Math.floor(Math.abs(start_r * Math.sin(theta)));
        this_x2 = Math.floor(800 + (end_r * Math.cos(theta)));
        this_y2 = Math.floor(Math.abs(end_r * Math.sin(theta)));

        $('#space-map')
        .restoreCanvas()
        .drawLine({
            strokeStyle: '#fff',
            strokeWidth: 1,
            x1: this_x1,
            y1: this_y1,
            x2: this_x2,
            y2: this_y2
        });

    }
});

</script>

Apparently I fixed it by putting the width and height directly in the `canvas` tag, like so: `'. My question is, why can't I set the dimensions using CSS? Why do I have to use built-in `width` and `height` tag attributes? — TerranRich, Apr 26 '12 at 19:40

score 0 · Accepted Answer · edited May 23 '17 at 12:21

0

Apparently setting the width and height of the canvas using the built-in attributes width and height solved this problem. My question regarding this detail has been answered here: Canvas is stretched when using CSS but normal with "width" / "height" properties

edited May 23 '17 at 12:21

Community

1
1

answered Apr 26 '12 at 19:42

TerranRich

1,263
3
20
38

Why is my radial grid map zoomed in so much?

1 Answers1