The curved sides of a triangular path?

Question

I draw a triangle on the canvas, something like:

canvas.moveTo(0, 30); canvas.lineTo(40, 0); canvas.lineTo(40, 40); canvas.lineTo(40, 40); canvas.lineTo(0, 30); 

And get the right triangle on my canvas. But I need to tilt the sides a bit and fill this path with a specific color. What is the easiest way to do this? Drawing arcs? But how to fill an object?

Thanks!

Answer 1

EDIT: I noticed that you used an android canvas, not an HTML canvas, sorry. The concept is exactly the same, except that you call quadTo() instead of quadraticCurveTo() , so my example should catch you anyway.

Also on android you use canvas.drawPath(path, paint) and pass the paint that has its Paint.style set to FILL_AND_STROKE.

You will need to build a path, fill() it, then stroke() to get a filled path with a stroke outline.

To get this particular shape, the easiest way is to draw two quadratic curves. The quadratic curve first needs the control point x, y, and then the end point x, y. The control point for both curves should be near the middle of your desired triangle. Here is an example:

 ctx.fillStyle = "lightgray"; ctx.moveTo(0, 100); ctx.quadraticCurveTo(50, 50, 50, 0); ctx.quadraticCurveTo(50, 50, 100, 100); ctx.lineTo(0, 100); ctx.fill(); ctx.stroke(); 

Here is an example for you.