Html 5 Canvas Lineto() Line Color Issues

html 5 canvas LineTo() line color issues

Strokes do overlap from both sides of the coordinates.

var ctx = c.getContext('2d');ctx.strokeStyle="red";// draw bigctx.scale(30, 30);ctx.beginPath();ctx.moveTo(5, 0);ctx.lineTo(5, 10);ctx.stroke();
drawPixelGrid();

function drawPixelGrid() {  // simply renders where the pixel bounds are  ctx.beginPath();  // remove the zoom  ctx.setTransform(1,0,0,1,0,0);  ctx.strokeStyle = 'gray';  ctx.lineWidth = 2; // avoid the problem we are demonstrating by using a perfect lineWidth ;-)
  for(let y=0; y<=300; y+=30) {    ctx.moveTo(0, y);    ctx.lineTo(300, y);    for(let x=0; x<=300; x+=30) {      ctx.moveTo(x, 0);      ctx.lineTo(x, 300);    }  }  ctx.stroke();}

<canvas id="c" height=300></canvas>

HTML canvas line color is not accurate

do this, your canvas will show high resolution pixels

set canvas width and height to (desired width and height) * devicePixelRatio * 2
reassign it using css style property to what width and height you want
scale context 2, 2
By default, one unit on the canvas is exactly one pixel. A scaling
transformation modifies this behavior. For instance, a scaling factor
of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. Similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size.

const width = height = 100
const pixelRatio = window.devicePixelRatio * 2;
const canvas = document.getElementById('line');
canvas.width = width * pixelRatio;
canvas.height = height * pixelRatio;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
const ctx = canvas.getContext("2d");
ctx.scale(pixelRatio, pixelRatio);

ctx.strokeStyle = 'blue';
ctx.lineCap = "square";

ctx.moveTo(10.5, 40.5);
ctx.lineTo(80.5, 40.5);

ctx.moveTo(10.5, 41.5);
ctx.lineTo(80.5, 41.5);

ctx.moveTo(10.5, 43.5);
ctx.lineTo(80.5, 43.5);

ctx.stroke();

<canvas id="line"></canvas>

HTML5 Canvas line with different color

i was able to figure out the issue my self.. I'm posting the fix if anybody needs it in future.. I made a c.moveTo to previous X, Y values.. and the pblm is fixed..

Why can't I draw two lines of varying colors in my HTML5 canvas?

You aren't calling canvasContext.beginPath(); when you start drawing your second line.

To make the drawing sections more independent, I added whitespace:

var canvas = document.createElement('canvas');
canvas.height = 150;
canvas.width = 150;

var canvasContext = canvas.getContext('2d');

// Draw the red line.
canvasContext.beginPath();
canvasContext.strokeStyle = '#f00';
canvasContext.moveTo(10, 0);
canvasContext.lineTo(10, 100);
canvasContext.stroke();

// Draw the green line.
canvasContext.beginPath();
canvasContext.moveTo(50, 0);
canvasContext.strokeStyle = '#0f0';
canvasContext.lineTo(50, 100);
canvasContext.stroke();

document.body.appendChild(canvas);

Demo: http://jsfiddle.net/AhdJr/2/

Incorrect line position with HTML Canvas when lineWidth is not set to 1

The fill is the root cause of your problems

const geometryParsed = [  {    geom: [{ x:78, y:132 }, { x:59, y:132 }, { x:59, y:183 }, { x:78, y:183 }, { x:78, y:132 }]  },  {    geom: [{ x:97, y:132 }, { x:78, y:132 }, { x:78, y:166 }, { x:97, y:166 }, { x:97, y:132 }]  },];
const canv = document.getElementById("canvas");const context = canv.getContext("2d");
context.translate(-50, -100)context.lineWidth = 2;for (let k = 0; k < geometryParsed.length; k++) {  const geometry = geometryParsed[k].geom;  context.beginPath();  context.moveTo(geometry[0].x, geometry[0].y);  for (let i = 1; i < geometry.length; i++) {    context.lineTo(geometry[i].x, geometry[i].y);      }  context.stroke();}
context.translate(80, 0)context.lineWidth = 4;for (let k = 0; k < geometryParsed.length; k++) {  const geometry = geometryParsed[k].geom;  context.beginPath();  context.moveTo(geometry[0].x, geometry[0].y);  for (let i = 1; i < geometry.length; i++) {    context.lineTo(geometry[i].x, geometry[i].y);  }  context.stroke();  context.fillStyle = "white";  context.fill();}

<canvas id="canvas" width="476px" height="170px"></canvas>

HTML5 Canvas changes colors of all lines

Just add a closePath() call (as well as beginPath) where you draw your line, like this:

ctx.beginPath();
ctx.moveTo(start,start2);
ctx.lineTo(finish,finish2);
ctx.stroke();
ctx.closePath();

Otherwise instead of drawing only the newest line, you're gonna draw all the previous lines again because the open path is still the same, thus causing the effect of the lines changing color and width when what you're looking at is actually new lines being drawn over them.

Canvas drawings, like lines, are blurry

When drawing lines in canvas, you actually need to straddle the pixels. It was a bizarre choice in the API in my opinion, but easy to work with:

Instead of this:

context.moveTo(10, 0);
context.lineTo(10, 30);

Do this:

context.moveTo(10.5, 0);
context.lineTo(10.5, 30);

Dive into HTML5's canvas chapter talks about this nicely

multicolors in canvas LineTo

Changing the color while you are constructing the path doesn't do anything. The color is applied only once, when stroke() is called, so the last strokeStyle you set will be the color of the entire line.

beginPath(), moveTo(), lineTo(), etc only create a path and that path itself has no color. Stroking or filling that path only ever apply a single color.

If you want a path that is multiple colors you will have to do one of two things:

Begin a path, do some number of lines, stroke it one color, and then begin another path that will be stroked with a different color. In other words:

// make a red line segment
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.strokeStyle = 'red';
ctx.stroke();
// Begin a new path and make this line segment green
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x, y);
ctx.strokeStyle = 'green';
ctx.stroke();
//etc

Or, depending on what you're doing you could also use a linearGradient

HTML5 canvas updating a color of an existing line - possible?

It's not possible to redraw your line because canvas/context does not "remember" where it drew your line.

The common design pattern is to "remember" the line in a javascript object:

var myLine={x0:10,y1:20,x1:100,y1:50};

Then you can redraw the remembered line with a new color:

context.strokeStyle=myNewColor;
context.beginPath();
context.moveTo(myLine.x0,myLine.y0);
context.lineTo(myLine.x1,myLine.y1);
context.stroke();

Another possible glitch.

Canvas will automatically anti-alias all of its path drawings. That means canvas may add anti-aliasing pixels to your first line which will remain even if you overwrite that first line.

A common design pattern for canvas drawings is to "remember" all drawings and then completely erase & redraw all the remembered objects to the canvas.

A useful new feature is being added to Html Canvas...

In near future versions of canvas, there will be a Path Object built into the context that will "remember" path objects for you.

Html 5 Canvas Lineto() Line Color Issues