Draw line with different widths on left or right side of line vector in HTML canvas-CodePudding

I am working on a html canvas and I am drawing some lines on the canvas. The process is easy. but now I want to draw two lines at the same coordinates with different width's but one on right side of the actual line's coordinates and one on the left side. To be more clear lets look at this example

As you see when we draw a line with a width of lets say x, it will extend x/2 pixels around the line. I want to get something like this:

as you see the second example line width is extended in only one side. I know I can get this by offsetting line for x/2 in one side but I am not sure how the calculations would work on the canvas. Ps: I want to get something like this at the end.Two lines with different styles with the same coordinates

CodePudding user response：

In this example I take an alternative approach. I create an SVG image, load it into an image object and then draw it on the canvas. The SVG could off course be hidden/only a string in JS.

I don't know about the performance of this, so maybe it is not working in your context -- I just find it a fun way to solve the issue.

var svg = document.querySelector('svg');
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var img = new Image(300, 30);

img.addEventListener('load', e => {
  ctx.drawImage(e.target, 0, 0);
});

var imagesrc = btoa(svg.outerHTML);

img.src = `data:image/svg xml;base64,${imagesrc}`;

<svg viewBox="0 0 200 20" width="300" height="30" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="lg1" gradientUnits="userSpaceOnUse">
      <stop offset="0"  stop-color="orange" />
      <stop offset="1" stop-color="red" />
    </linearGradient>
    <linearGradient id="lg2" gradientUnits="userSpaceOnUse">
      <stop offset="0"  stop-color="navy" />
      <stop offset="1" stop-color="darkgreen" />
    </linearGradient>
  </defs>
  <line x1="0" y1="5" x2="200" y2="5" stroke-width="10" stroke="url(#lg1)" />
  <line x1="0" y1="15" x2="200" y2="15" stroke-width="10" stroke="url(#lg2)" />
  <line x1="0" y1="10" x2="200" y2="10" stroke-width="2" stroke="black" />
</svg>

<canvas width="300" height="30"></canvas>

CodePudding user response：

This might help. I functionalized the drawing of the gradient line with a flag to draw the black underline.

The function takes coordinates, width of line, and color for gradients.

This could be a starting point for you to explore. There might be edge cases that I missed where this function will break down.

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

function distance( a, b ) {
  return Math.sqrt((a.x - b.x) * (a.x - b.x)   (a.y - b.y) * (a.y - b.y) );
}

function drawGradientLine( line_width, grad_1, grad_2, xy1, xy2, underline ) {
  var grad = ctx.createLinearGradient(xy1.x, xy1.y, xy2.x, xy2.y);
  grad.addColorStop(0, grad_1);
  grad.addColorStop(1, grad_2);
  
    ctx.save();  
  ctx.lineWidth = line_width;
  ctx.strokeStyle = grad;
  ctx.beginPath();
    ctx.moveTo(xy1.x, xy1.y);
    ctx.lineTo(xy2.x, xy2.y);
    ctx.stroke();
  ctx.restore();
  
  if ( underline ) {
    const linelen = distance( xy1, xy2);
    const hyp1 = line_width / 2;
    const angle = Math.asin( (xy2.y - xy1.y) / (linelen) );
    const dy = (angle < 0) ? -1 * hyp1 * Math.cos( angle ) : hyp1 * Math.cos( angle );
    const dx = (angle < 0) ? -1 * hyp1 * Math.sin( angle ) : hyp1 * Math.sin( angle );
 
    const c1 = {
        x: xy1.x - dx, 
      y: xy1.y   dy
    };
    const c2 = {
        x:xy2.x - dx, 
      y: xy2.y   dy
    };
    
    ctx.save();  
    ctx.lineWidth = 1;
    ctx.strokeStyle = 'black';
    ctx.beginPath();
    ctx.moveTo(c1.x, c1.y);
    ctx.lineTo(c2.x, c2.y);
    ctx.stroke();
    ctx.restore();
  }
}



drawGradientLine( 20, 'red', 'green', {x:50, y: 150}, {x:150, y:150}, true);


drawGradientLine( 20, 'pink', 'orange', {x:10, y: 10}, {x:50, y:50}, true);

drawGradientLine( 20, 'pink', 'orange', {x:200, y: 100}, {x:250, y:20}, true);


drawGradientLine( 10, 'blue', 'green', {x: 50, y: 350}, {x:150, y:450}, false);


drawGradientLine( 40, 'pink', 'aquamarine', {x: 100, y: 200}, {x: 150, y:350}, false);

<canvas id=canvas1 width=300 height=600></canvas>

CodePudding user response：

It is just a matter of moving around the canvas and draw lines. Here I'm drawing three lines, two of them with gradient and one in black.

An alternative to lines could be CanvasRenderingContext2D.fillRect() where you define x, y, width and height. Then it is easier to calculate where the lines should be.

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');


let gradient1 = ctx.createLinearGradient(0, 0, 280, 0);
gradient1.addColorStop(0, 'green');
gradient1.addColorStop(1, 'blue');
ctx.strokeStyle = gradient1;
ctx.lineWidth = 10;

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(290, 10);
ctx.stroke();

let gradient2 = ctx.createLinearGradient(0, 0, 280, 0);
gradient2.addColorStop(0, 'red');
gradient2.addColorStop(1, 'green');
ctx.strokeStyle = gradient2;
ctx.lineWidth = 10;

ctx.beginPath();
ctx.moveTo(10, 20);
ctx.lineTo(290, 20);
ctx.stroke();

ctx.strokeStyle = 'black';
ctx.lineWidth = 1;

ctx.beginPath();
ctx.moveTo(10, 15);
ctx.lineTo(290, 15);
ctx.stroke();

<canvas width="300" height="200"></canvas>