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>

Answer 1

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