Improve the line sharpness while rendering in Canvas in Windows/Linux machine (Device Pixel Ratio < 2)?

Question

I'm trying to draw a grid like structure using HTML Canvas(2d Context) But line sharpness of my grid is hazy, thick and poor when comparing my Canvas Grid to Div Grid. Please help.

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

Could you please upload all your code, including HTML so it can be run.

What you can do is add a class to your HTML tags, that way you can edit the class using Javascript instead of directly adding inline style. You can look for that element using getElementByClass(your_class) .

To give a better solution to your problem I'd need to see more of your code though. Try using Jsfiddle or Codepen!