Drawing a 1px thick line in canvas creates a 2px thick line
html, html5-canvas, javascript, line
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.
Problem
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!