画布绘制到不画线

Question

I have built a function in javascript to draw to and from set points on the canvas. All of my points work correctly expect c. If I try to draw a line from any point to c it does not work.

Javascript

var a = {x:0, y:0};
var b = {x:350, y:0};
var c = {x:0, y:350};
var d = {x:350, y:350};
var e = {x:100, y:100};
var f = {x:100, y:250};
var g = {x:250, y:250};
var h = {x:250, y:100};

function drawLine(a, b)
{
ctx.beginPath();
ctx.moveTo(a.x,a.y);
ctx.lineTo(b.x,b.y);
ctx.stroke();
}
drawLine(d, c);

Why do all points work expect c????

Answer 1

From this, I am guessing the width and the height of the canvas is 350.

Assuming that, they are working. Its just being drawn on the border. You're trying to go from {x:0, y:350} to {x:350, y:350} . Notice how the y for both is 350 . This means it will draw from the bottom,left corner to the bottom,right corner, exactly staying at y : 350 , which is the border. So therefore you will not be able to see it.

Try changing var c = {x:0, y:350}; to var c = {x:0+5, y:350-5}; , leaving it at {x:5, y:345} . And you will notice that for point c the lines now show, but very very close to the border.