How to convert an Arc into a Line with HTML5 Canvas?

Question

I would like to animate a circle into a line with the radius equaling the width, and I am wondering how I can do this with an Arc? Or perhaps there is a better way?

From

To

Here's my arc:

function drawStar(x,y,size,scale,opacity,ctx){
  ctx.save();
  ctx.beginPath();
  ctx.arc(x,y,size+scale,0,size+scale * Math.PI,false);
  ctx.globalAlpha = opacity
  ctx.closePath();
  setFillStyle('rgb(255,237,219)',ctx);
  ctx.fill()
  ctx.restore();
}

I tried using ctx.scale(n,1), however it does not keep the same radius(width) and it scales the collection of arcs as a whole (zoom in effect).

score 2 · Accepted Answer · answered Mar 20 '18 at 19:47

Use instead a wide line-width value with "round" lineCap and stroke():

var ctx = c.getContext("2d");
ctx.lineWidth = 50;
ctx.lineCap = "round";

ctx.moveTo(45  , 25);
ctx.lineTo(45.5, 25);  // in IE11 this must be slightly offset

ctx.moveTo( 45, 100);
ctx.lineTo(150, 100);
ctx.stroke();

<canvas id=c></canvas>

Remember beginPath() for animation.

kshetline · Answer 2 · 2018-03-20T18:53:55.730

You could draw the left and right halves of a circle using arc, then do a fillRect in between to connect them.

Edit: To elaborate on what I said earlier:

function init() {
  let canvas = document.getElementById('myCanvas');

  canvas.width = 400;
  canvas.height = 400;
  canvas.style.width = "400px";
  canvas.style.height = "400px";

  let ctx = canvas.getContext("2d");

  function fillArc(ctx, cx, cy, r, startDeg, endDeg) {
    ctx.beginPath();
    ctx.arc(cx, cy, r, startDeg * Math.PI / 180, endDeg * Math.PI / 180);
    ctx.fill();
  }

  function fillOval(ctx, cx, cy, r, sideLength, skipFirstArc) {
    if (!skipFirstArc) {
      fillArc(ctx, cx, cy, r, 90, 270);
    }

    ctx.fillRect(cx, cy - r, sideLength, r * 2);
    fillArc(ctx, cx + sideLength, cy, r, 270, 90);
  }

  let sideLength = 0;
  ctx.fillStyle = 'red';

  function animateOval() {
    if (sideLength === 100) {
      ctx.clearRect(0, 0, 400, 400);
    }
    else {
      fillOval(ctx, 30, 30, 25, sideLength, sideLength > 0);
    }

    ++sideLength;

    if (sideLength > 100) {
      sideLength = 0;
    }
  }

  setInterval(animateOval, 16);
}

Here's a Plunker with the above code running: http://plnkr.co/edit/vNqoUjPKg2lqC7JtYuEb?p=preview

score 1 · Answer 3 · answered Mar 20 '18 at 17:19

You can use Bezier Curves to 'transform' your arc.

There's some math involved in calculating the perfect ends of your stretched circle but I guessed and tweaked my numbers.

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

ctx.beginPath();     
ctx.moveTo(40, 20);
ctx.lineTo(100, 20);
ctx.bezierCurveTo(130, 20, 130, 60, 100, 60);
ctx.lineTo(40, 60);
ctx.bezierCurveTo(10, 60, 10, 20, 40, 20);
ctx.stroke();
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(40, 80);
ctx.bezierCurveTo(68, 80, 68, 120, 40, 120);
ctx.bezierCurveTo(12, 120, 12, 80, 40, 80); 
ctx.fill();
ctx.stroke();

<canvas id="myCanvas"></canvas>

How to convert an Arc into a Line with HTML5 Canvas?

3 Answers3