CODEWITHSUNDEEP
htmlcanvasshapes
Siavash Goudarzi
Siavash Goudarzi

Reputation: 39

drawing custom shape in canvas html5

image

Can someone please help me to draw this shape in canvas?

Any help is appreciated!

Upvotes: 1

Views: 3055

Answers (2)

jing3142
jing3142

Reputation: 1871

To draw any custom shape use this site http://canvimation.github.com/ to directly draw the shape and to export it as a canvas. Viewing the source of the exported page will also show you the canvas script to obtain it.

For the above shape, change the grid settings to grid on and show to make sure you will draw a straight line. Choose the free form shape, click to start a line then double click at the end of the line. Drag the red control points to form the require shape. The control points do not lock to the grid but can help you gauge where to place them.

The following shows one possibility obtained by doing this.

           ctx.beginPath();
           ctx.moveTo(167,196);
           ctx.bezierCurveTo(217,98,418,99,467,196);
           ctx.bezierCurveTo(414,296,218,295,167,196);
           ctx.closePath();
           ctx.stroke();

Upvotes: 0

nemo
nemo

Reputation: 1685

You can try quadraticCurveTo ( https://developer.mozilla.org/en/Canvas_tutorial/Drawing_shapes )

Here's an example: http://jsfiddle.net/V9sVY/

Upvotes: 1

Related Questions