search

konvajs / konva

Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.
http://konvajs.org/
Other
11.07k stars 896 forks source link

Can we draw an un-closed ellipse like below? #1745

Closed nyi-ailytics closed 2 months ago

nyi-ailytics commented 2 months ago

Is it possible to draw something like this? The ellipse that doesn't connect?

image

lavrton commented 2 months ago

I think the simplest is to use Konva.Path

var ellipseCutPath = new Konva.Path({
  x: stage.width() / 2,
  y: stage.height() / 2,
  offsetX: 100,
  offsetY: 50,
  data: 'M 50,50 a 100,50 0 1,0 100,0', // This draws an arc of an ellipse
  stroke: 'red',
  strokeWidth: 5,
  draggable: true
});

https://jsbin.com/cuxedofasi/1/edit?html,js,output