input event with input[type="range"]

testing to see if using input event works better than change

HTML

<html>
 <head>
  <title>Demo</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="style.css">
  <script src="canvas.js" defer></script>
 </head>
 <body>
		<canvas id="canvas"></canvas>
		<div id = "instructions">
				<input id="X" type="range" min="0" max="100" value="50" />	
</div>
</body>
</html>

CSS

#result {
    font-size: 2em;
}

JavaScript

//Создание canvas'a для рисования
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;
//Создание сетки

var xNull = canvas.width / 2;
var yNull = canvas.height / 2;

//label axis
function labelAxis(){
    //OX
    ctx.strokeStyle = "black";
    ctx.lineWidth = 1;
    for(var x = 0; x < canvas.width; x+=50)
    {
        labelX = x * 0.1;
        labelX = labelX.toFixed(0); //toFixed - char after comma
        ctx.strokeText(labelX, canvas.width / 2 + 10 + x, canvas.height / 2 - 5);
        ctx.strokeText(-labelX, canvas.width / 2 + 10 - x, canvas.height / 2 - 5);
    }
    
    for(var y = 0; y < canvas.width; y+=50)
    {
        labelY = y * 0.1;
        labelY = labelY.toFixed(0); //toFixed - char after comma
        ctx.strokeText(labelY, canvas.width / 2 + 10, canvas.height / 2 - 5 + y);
        ctx.strokeText(-labelY, canvas.width / 2 + 10, canvas.height / 2 - 5 - y);
    }
}

//axis
function axis(){
    ctx.strokeStyle = "#6B90D4";
    ctx.lineWidth = 4;
    //OX
    ctx.beginPath();
    ctx.moveTo(0, canvas.height / 2);
    ctx.lineTo(canvas.width, canvas.height / 2);
    ctx.closePath();
    ctx.stroke();
    //OY
    ctx.beginPath();
    ctx.moveTo(canvas.width / 2, 0);
    ctx.lineTo(canvas.width / 2, canvas.height);
    ctx.closePath();
    ctx.stroke();
}

//grid X
function gridOX(x, y){
    ctx.strokeStyle = "#6B90D4";
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x+1, y+1);
    ctx.closePath();
    ctx.stroke();
}

//grid Y
function gridOY(y, x){
    ctx.strokeStyle = "#6B90D4";
    ctx.beginPath();
    ctx.moveTo(y, x);
    ctx.lineTo(y+1, x+1);
    ctx.closePath();
    ctx.stroke();
}

//grid full
function gridFull () {
    //OY
    // right-top
    for(var x = canvas.width / 2; x < canvas.width; x+=50)
        for(var y = canvas.height / 2; y > 0; y-=5)
            gridOX(x, y);
    //...