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.
Follow these steps to draw a spade, heart, club, and diamond suit:
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( x, y + topHeight / 2, // control point 1 x - width / 2, y + topHeight / 2, // control point 2 x - width / 2, y + topHeight // end point ); // bottom left of spade context.bezierCurveTo( x - width / 2, y + topHeight * 1.3, // control point...