HTML5 Canvas Scallop Shape

I really need help badly on how to create a scallop shape using Canvas I tried playing around the cloud sample but it was really difficult for me to create what I've wanted.

I simply wanted to know the code for the scallop shape for rectangle and circle.

This is the image that What I've wanted. Scallop Design

It design doesn't have to exactly the same but as possible it does look like this.


Answers 1

  • Use "Bezier Curve Method" to make complicated shapes.

    I suggest going on desmos and messing around with the bezier curve in order to understand the complications. I hope this helped :)

    Edit: Bezier curves work like this:

    ctx.bezierCurveTo(Control point x, control point y, 2nd control point x, 2nd control point y, finishing x, finishing y);

Related Articles