[Иса Мирзоев]

Всех приветствую. Часто мне помогаете. Выручите снова, пожалуйста) Осваиваю канвас, все бы ничего, но мой график всегда смещенный, а ошибки я найти не могу. Сам путаюсь в осях, честно говоря. Если делать квадратный график, то все норм. Я примерно понимаю, что ошибка, вероятно, в стартовых точках, но перепробовал все, а найти не удается ее(( Есть комментарии от нуба, если это поможет) Спасибо большое))
п.с. нужно только найти ошибку, где мне исправить. Понимаю, что код нубский, а график уродский, но мне главное суть понять. Переписывать половину кода для оптимизации не нужно, иначе я совсем запутаюсь((( Спасибо всем

//график

//определяем канвас
//задаем размеры и цвета, ширину линий и шрифт
//задаем стартовые значения осей
//рисуем оси


var canv = document.getElementById("canv")
var canvas = canv.getContext("2d")

canv.width = 800
canv.height = 500
canvas.lineWidth = 2
canvas.font = "Georgia 10px"
canvas.strokeStyle = "red"

var oy=canv.width/2
var ox=canv.height/2


canvas.beginPath()
canvas.moveTo(oy,0)
canvas.lineTo(oy,canv.height)
canvas.moveTo(0,ox)
canvas.lineTo(canv.width,ox)
canvas.stroke()
canvas.closePath()


//определяем длину шага в пунктах, количество шагов, цвет и толщину
//через 2 цикла задаем описание цифр, указав связь i с шагом, перезадавая количество шагов для разных осей


var step = 50
var steps = canv.width/step
canv.lineWidth = 1
canvas.fillStyle = "black"
canvas.lineWidth = 1

for(i=0; i<steps; i++){
canvas.fillText((i*step)-oy,i*step+2,ox+10)
}

steps = canv.height/step

for(i=0; i<=steps; i++){
canvas.fillText(ox-(i*step),oy+2,i*step+10)   
}



canvas.strokeStyle = "gold"
canvas.strokeText("Y",oy-12,12)
canvas.strokeText("X",canv.width-8,ox-8)


//пишем будущую функцию и цвет графика
//задаем стартовые точки
//начинаем канвас со стартовыми точками
//проходимся циклом, где переводим новые точки в старые и указываем конечные данные канваса
//завершаем канвас



function f(x){
    return x * x 
}

canvas.fillStyle = "blue"

var x0 = 0-oy
var y0 = f(x0)

canvas.beginPath()
canvas.moveTo(x0,y0)
for(i=0; i<=canv.width; i++){
var x = i-oy
var y = f(x)
canvas.lineTo(x+ox,oy-y)
}
canvas.stroke()
canvas.closePath()