CODEWITHSUNDEEP
javaandroidgraphicscanvas2d
user584513
user584513

Reputation: 630

Curved sides of triangle path?

I am drawing a triangle on a 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 proper triangle on my Canvas. But I need to curve the sides a little and fill that path with specific color. What is the easiest way to do this? Drawing arcs? But how to fill the object?

This is what I need to get

Thanks!

Upvotes: 4

Views: 3426

Answers (1)

Simon Sarris
Simon Sarris

Reputation: 63840

EDIT: I noticed you were using android's canvas, not HTML Canvas, sorry. The concept is exactly the same except you'll call quadTo() instead of quadraticCurveTo(), so my example should still get you going.

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

You will want to construct the path, fill() it, then stroke() it in order to get both a filled path with the stroke outline.

To get that particular shape, the easiest way is to draw two quadratic curves. A quadratic curve first needs a control point x,y then the end point x,y. The control point for both curves should be around 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 that example live for you.

Upvotes: 6

Related Questions