O'Reilly logo

HTML5 Canvas Cookbook by Eric Rowell

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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.

Creating custom shape functions: playing card 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( ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required