Search code examples
javascripthtmlhtml5-canvasline

Drawing a 1px thick line in canvas creates a 2px thick line

In this jsfiddle there's a line with a lineWidth of 1.

http://jsfiddle.net/mailrox/9bMPD/350/

e.g: 

ctx.lineWidth = 1;

However the line is 2px thick when it's drawn on the canvas, how do you create a 1px thick line.

I could draw a rectangle (with 1px height) however I want the line to also work on diagonals. So how do you get this line to be 1px high?

Thanks!

Solution

  • Canvas calculates from the half of a pixel

    ctx.moveTo(50,150.5);
ctx.lineTo(150,150.5);

    So starting at a half will fix it.

    var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

ctx.lineWidth = 1;

// linear gradient from start to end of line
var grad = ctx.createLinearGradient(50, 150, 150, 150);
grad.addColorStop(0, "red");
grad.addColorStop(1, "green");

ctx.strokeStyle = grad;

ctx.beginPath();
ctx.moveTo(50, 150.5);
ctx.lineTo(150, 150.5);

ctx.stroke();
    <canvas id="canvas1" width="500" height="500"></canvas>http://jsfiddle.net/9bMPD/http://jsfiddle.net/9bMPD/

    This answer explains why it works that way.