У меня есть линейная диаграмма написана на js canvas. И я хочу придать ей адаптивность.
Написал все так что нужно только при изменении размера вьюпорта менять значения двух переменных xMax, yMax. Но что то пошло не так.
При срабатывании события, как показывает консоль, значения переменных меняются, но диаграмма рисуется все равно по исходным значениям.
let xMax = 830; // - length of the X-axis
let yMax = 440; // - length of the Y-axis
function draw() {
console.log(xMax);
drawCoordinatesMarkup();
drawLineByCoordinates(x0, yMax, redLine, "#d87342", "rgba(216, 115, 66, .3)", 3); // - Draw red line
drawLineByCoordinates(x0, (yMax - yStep * 7), yellowLine, "#f3d432", "rgba(243, 212, 50, .3)", 3); // - Draw yellow line
drawLineByCoordinates(x0, (yMax - yStep * 4), blueLine, "#7c8da1", "rgba(124, 141, 161, .3)", 3); // - Draw blue line
}
function viewport() {
let e = window,
a = 'inner';
if (!('innerWidth' in window)) {
a = 'client';
e = document.documentElement || document.body;
}
return {
width: e[a + 'Width'],
height: e[a + 'Height']
}
}
window.addEventListener('resize', () => {
if(viewport().width <= 900) {
clear();
canvas.setAttribute('width', (viewport().width * 70 / 100)) + "px";
xMax = canvas.width;
draw();
}
});