Не правильно работает canvas

var ModelingStatus = 0;
var GlobalCounter = 0;
var canvas, ctx;
 
//функция задания размера холста
function ChangeCanvasDimensions() {
    document.getElementById('canvas').width = document.body.clientWidth;
    document.getElementById('canvas').height = document.body.clientHeight;
}
 
var f1, f0;
 
function ClearGrids(x, y, width, height) {
 
}
 
function CreateGrid() {
    f1 = 0; f0 = 0;
    //получение контекста холста страницы
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');
    //расстояние между соседними линиями (вертикальными и горизонтальными соответственно)
    var dist_h, dist_v;
    //расстояние между соседними шкалами (вертикальными и горизонтальными соответственно)
    var scale_h, scale_v;
    var sc_w = 10;
    //сохранение размера пользовательского поля
    var w = document.body.clientWidth;
    var h = document.body.clientHeight;
    ctx.lineWidth = 1;
    ctx.strokeStyle = "rgb(150, 150, 150)";
    ctx.fillStyle = "rgb(0, 0, 0)";
    ctx.stroke();
    ctx.clearRect(0, 0, w - 20, h - 20);
    ctx.fillRect(0, 0, w - 20, h - 20);
    ctx.strokeRect(0, 0, w - 20, h - 20);
    //считаем расстояния между шкалами и между сеткой осциллографа
    dist_h = (w - 20) / 10;
    dist_v = (h - 20) / 10;
    scale_h = (w - 20) / 100;
    scale_v = (h - 20) / 100;
    
    //установка цвета линий (в данном случае - серый цвет)
    ctx.strokeStyle = "rgb(190, 190, 190)";
    ctx.lineWidth = 1;
    //цикл для отрисовки больших линий по вертикали и по горизонтали
    for(i = 1; i < 10; i++) {
        ctx.moveTo(i * dist_h, 0);
        ctx.lineTo(i * dist_h, h - 20);
        ctx.stroke();
        ctx.moveTo(0, i * dist_v);
        ctx.lineTo(w - 20, i * dist_v);
        ctx.stroke();
    }
    
    //цикл для отрисовки шкалы по вертикали и по горизонтали
    for(i = 1; i < 100; i++) {      
        if(i % 5 != 0 && i != 49 && i != 51) {
            ctx.moveTo((w - 20) / 2 - sc_w, i * scale_v);
            ctx.lineTo((w - 20) / 2 + sc_w, i * scale_v);
            ctx.stroke();
            ctx.moveTo(i * scale_h, (h - 20) / 2 - sc_w);
            ctx.lineTo(i * scale_h, (h - 20) / 2 + sc_w);
            ctx.stroke();
        }
        
        if(i % 5 == 0) {
            ctx.moveTo((w - 20) / 2 - sc_w - 7.5, i * scale_v);
            ctx.lineTo((w - 20) / 2 + sc_w + 7.5, i * scale_v);
            ctx.stroke();
            ctx.moveTo(i * scale_h, (h - 20) / 2 - sc_w - 7.5);
            ctx.lineTo(i * scale_h, (h - 20) / 2 + sc_w + 7.5);
            ctx.stroke();
        }
    }
}
 
function Calculate(x) {
    canvas = document.getElementById('canvas');
    cx = canvas.getContext('2d');   
    //ctx.strokeStyle = "rgb(0, 170, 0)";
    //ctx.lineWidth = 3;
    f1 = -Math.sin(x);
    f0 = -Math.sin(x - 0.01);
    cx.moveTo(x * 70, f0 * 150 + (document.body.clientHeight - 20) / 2);
    cx.lineTo(x * 70, f1 * 150 + (document.body.clientHeight - 20) / 2);
    cx.stroke();
        //if(x * 70 >= document.body.clientWidth - 20) {
        //  CreateGrid();
        //}
}
 
function ModelingFunction() {   
    if(ModelingStatus != 1)
        return;
    GlobalCounter ++;       
    Calculate(GlobalCounter / 100);
    document.getElementById("counter").innerHTML = GlobalCounter + " мс";
    //document.getElementById("ModelingStat").innerHTML = "Моделирование";
    window.setTimeout(ModelingFunction, 1);
}
 
function ButtonStartClick() {
    if(ModelingStatus == 0)
        GlobalCounter = 0;
    ModelingStatus = 1;
    window.setTimeout(ModelingFunction, 1);
}
 
function ButtonStopClick() {
    ModelingStatus = 0;
    document.getElementById("counter").innerHTML = "0 мс";
    //CreateGrid();
    ctx.reset();
}
 
function ButtonPauseClick() {
    ModelingStatus = 2;
}

a=document.getElementById("canvas");
ctx=a.getContext("2d");

ctx=document.getElementById("canvas").getContext("2d");