New Topic/Question
Reply
I tried drawing a horizontal and vertical line both intersecting in the middle of the canvas(imitating a coordinate plane's x and y axis), though I didn't get the expected results until some guesswork with the numbers, namely the y values.
What I used to get it to work:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title> </title>
</head>
<body>
<canvas id="canv" style="height:300px;width:300px;"> </canvas>
<script>
var c = document.getElementById("canv");
var ctx = c.getContext("2d");
//y-axis
ctx.moveTo(150,0);
ctx.lineTo(150,300);
ctx.stroke();
//x-axis
ctx.moveTo(0,75);
ctx.lineTo(300,75);
ctx.stroke();
ctx.moveTo(0,0);
ctx.lineTo(100,100);
ctx.stroke();
</script>
</body>
sans the last 3 lines(move to 0,0 ; line to 100,100 ; and the stroke), The result is a canvas looking similar to an x-y graph.
Take note of the y values for the second(horizontal) line. In order to (correctly) graph the line, the y values had to be cut in half, otherwise the line would be sitting on the bottom of the canvas. Also, the horizontal line's stroke appears a few pixels thicker than the vertical.
Is there any weird x:y ratio that I'm not aware of? Any help would be appreciated. Thanks!
MultiQuote
| 