EaselJS triangle with rounded corners?

Question

How can I create a triangle with rounded corners in EaselJS? I'm using drawPolyStar to create the triangle,

var polystar = new createjs.Shape();
polystar.graphics.drawPolyStar(100, 100, 60, 3, 0, -90);

This is an image of what I want the triangle to look like:

EDIT: Image link doesn't seem to work. This is what the triangle should look like :

But actual triangle has sharp corners.

Answer 1

There are no canvas APIs for rounding corners of polygons that works like the roundRect API.

There are a few approaches I can think of:

1. Do the round corners yourself using arcTo. This would take some math to figure out, and there may even be some libraries or examples floating around.

[EDIT] I spent a little time making a sample https://jsfiddle.net/lannymcnie/cga60tsf/1/

2. Using rounded stroke edges, you can sort of fake it. This fiddle shows how a thick line with round ends can make the outer edges look round. You could draw another smaller triangle on top to give the desired effect.

Sample

// Line outer radius
context.lineJoin = "round";
context.lineWidth = cornerRadius;