tengo el siguiente gradiente en canvas.
https://jsfiddle.net/palaceslittle/tdL5nqe2/2/
Mi pregunta es: ¿Porqué si tengo seteado el rojo en 0.5, no aparece en la mitad de la barra?
¿Cómo logro que mi color aparezca justo en el centro ? ¿Cómo funciona el sistema de gradiente?
MIRAR EN PANTALLA COMPLETA
function fade() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var gradient = canvas.getContext("2d").createLinearGradient(0, 0, 1, 500);
gradient.addColorStop(0, 'gray');
gradient.addColorStop(0.5, 'red');
gradient.addColorStop(0.6, 'red');
gradient.addColorStop(1.0, 'gray');
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 200, 800);
}
fade();
<canvas id="canvas" width="200px" height="800"></canvas>