HTML5 Canvas Scallop Shape

Question

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.

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

THANK YOU SO MUCH IN ADVANCEEE..

Answer 1

You can draw such a shape by using dotted line dash, like this(a bit tricky).

JavaScript:

const canvas = document.querySelector("#canvas");
canvas.width = canvas.height = 300;
const ctx = canvas.getContext("2d");
const rect = [50, 50, 200, 200];
//draw dotted line dash.
ctx.lineCap = "round";
ctx.setLineDash([0, 40]);
ctx.lineDashOffset = 20;
ctx.lineWidth = 42;
ctx.strokeStyle = "purple";
ctx.strokeRect(...rect);
//remove disuse range.
ctx.globalCompositeOperation = "destination-out";
ctx.lineWidth = 38;
ctx.strokeRect(...rect);
ctx.fillRect(...rect);

Demo:
http://jsdo.it/defghi1977/iFR7