CODEWITHSUNDEEP
htmlcanvas
sumitmann
sumitmann

Reputation: 393

custom shape in canvas?

custom shape in canas

is there any way to create the shape using 'bezier Curve' or 'quadratic curve' in html5 canvas . or is there any method to draw a polygon in canvas

Upvotes: 0

Views: 741

Answers (2)

Wingblade
Wingblade

Reputation: 10103

For a polygon you can use the following(where ctx is your canvas's getContext('2d')):

ctx.fillStyle=*hex code of the color you want it to be";
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineTo(x3,y3);
*add more points if needed using a lineTo(x,y) for each of your points*
ctx.closePath();
ctx.fill();

If you want a stroke polygon use ctx.strokeStyle and ctx.stroke() instead of ctx.fillStyle and ctx.fill()

Upvotes: 1

user694833
user694833

Reputation:

Sure you can, you have at least:

  • quadraticCurveTo
  • bezierCurveTo

Have a look to this sample code:

http://www.html5canvastutorials.com/labs/html5-canvas-playing-card-suits/

Upvotes: 0

Related Questions