HTML5 Canvas Cookbook

Creating custom shape functions: playing card suits

If a royal flush gets your adrenaline going, then this one's for you. In this recipe, we'll create drawing functions for the spade, heart, club, and diamond suits.

How to do it...

Follow these steps to draw a spade, heart, club, and diamond suit:

1. Define the drawSpade() function which draws a spade with four Bezier curves, two quadratic curves, and one straight line:

   function drawSpade(context, x, y, width, height){ context.save(); var bottomWidth = width * 0.7; var topHeight = height * 0.7; var bottomHeight = height * 0.3; context.beginPath(); context.moveTo(x, y); // top left of spade context.bezierCurveTo( ...