Canvas, diagonal lines are thicker

Question

i have following problem. Im trying to draw a border with notches on my buttons and slider. thats working fine. but i noticed that my diagonal lines are twice as thick as the normal ones.

I saw that i have to work on the width/height settings in the canvas/tag itself. but i cant get it working!

Maybe i dont understand realy to make it work. pls help :)

button_canvas_border

slider_canvas_border

thats my html

<canvas width="1290" height="738" class="slider_canvas" id="slider_canvas" ></canvas>

or

<canvas class="slider_canvas" id="slider_canvas" ></canvas>

both dont work

and my js

jQuery(document).ready(function($) {
     $('.slider_canvas').each(function(index, canvas) {
        var wrapper_height = $('.nsaw_slider_front_wrapper').height() + 30;
        var wrapper_width = $('.nsaw_slider_front_wrapper').width() + 30;

        /* doesnt matter what i do on the below, its just not working */

        canvas.width = wrapper_width;
        canvas.height = wrapper_height;  

        canvas.style.width = wrapper_width;
        canvas.style.height = wrapper_height;

        canvas.setAttribute('width', wrapper_width);
        canvas.setAttribute('height', wrapper_height); 

        /* doesnt matter what i do on the above, its just not working */

        var point_01_cord = wrapper_width * 0.85;
        var point_02_cord = wrapper_height * 0.25423;
        var point_03_cord = wrapper_width * 0.15;
        var point_04_cord = wrapper_height * 0.74577;

        var ctx = canvas.getContext('2d');
        var gradient = ctx.createLinearGradient(0, 0, 170, 0);
      
        gradient.addColorStop("0", "#0033ff");
        gradient.addColorStop("1" ,"#ffff00"); 

        ctx.strokeStyle = gradient;
        ctx.lineWidth = 5;

        ctx.beginPath();
        ctx.translate(0.5,0.5);
        ctx.moveTo(0,0);
        ctx.lineTo(point_01_cord,0);
        ctx.lineTo(wrapper_width,point_02_cord);

        ctx.lineTo(wrapper_width,wrapper_height);
        ctx.lineTo(point_03_cord,wrapper_height);

        ctx.lineTo(0,point_04_cord);
        ctx.lineTo(0,0);  

        ctx.stroke();
    });
});

maybe someone can help :)

Answer 1

Strokes do overlap from both sides of the coordinates, that's by the way why you saw some say you should translate by 0.5, so that lineWidth = 1 covers a full pixel instead of two halves. (More on that here).

Here you are drawing a 5px wide line so you really don't want that offset (5 pixels can be rendered perfectly fine), even though it's not your actual problem here.
Your drawing is at the edges of the canvas boundaries. This means that only half of your line is visible.
To workaround that, offset all your lines coordinates to take into account its lineWidth. For instance the top line instead of having its y values set to 0 should have it set to 2.5 without the initial translate or to 2 with if you really want to keep it.