[Gozar]

рони,
Вот тебе функция:

//<canvas id="canvas" width="300" height="300" style="border: 1px solid #000"></canvas>

    function setPixel (x, y) {

        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.arc(x, y, 1, 0, Math.PI*2, true);
        ctx.fill();
        ctx.closePath();
    }
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d');
ctx.fillStyle = 'rgba(0,0,0,1)';

Можешь нарисовать на канвас то, что у тебя получилось?

Я не очень понимаю куда мне подставлять отрицательные значения из твоего кода.

Вот координаты двух линий:
x1 = 10, y1 = 10, x2 = 100, y2 = 100;
x1 = 10, y1 = 100, x2 = 100 y2 = 10;