Повысить четкость линий при рендеринге в Canvas на компьютере под управлением Windows / Linux (Device Pixel Ratio <2)?

Question

Я пытаюсь нарисовать структуру, подобную сетке, используя HTML Canvas (2d Context) Но при сравнении моей сетки Canvas с сеткой Div сетка слишком четкая, слабая и плохая. Пожалуйста, помогите.

context.strokeWidth = 1;
context.lineWidth   = 1;

function scaleCanvas(canvas, width, height) {
        var ratio           = Math.ceil(Math.max(window.devicePixelRatio, 1));
        var context         = canvas.getContext('2d'); 
        canvas.width        = width * ratio;
        canvas.height       = height * ratio;
        canvas.style.width  = width + 'px';
        canvas.style.height = height + 'px';
        context.scale(ratio, ratio);
    }  

Answer 1

Не могли бы вы выгрузить весь свой код, включая HTML, чтобы он мог быть запущен.

Что вы можете сделать, это добавить класс к своим тегам HTML, таким образом вы можете редактировать класс, используя Javascript, а не напрямуюдобавив встроенный стиль. Вы можете искать этот элемент, используя getElementByClass(your_class).

. Чтобы дать лучшее решение вашей проблемы, мне нужно было бы увидеть больше вашего кода. Попробуйте использовать Jsfiddle или Codepen!