Skip to content

Instantly share code, notes, and snippets.

@bellbind

bellbind/cardsuits.js

Created February 5, 2011 14:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save bellbind/812485 to your computer and use it in GitHub Desktop.
Save bellbind/812485 to your computer and use it in GitHub Desktop.
Download ZIP
[js][html] bezier card suit mark for canvas
Raw
cardsuits.js
CardSuits = (function () {
var drawPath = function (c2d, halfPath) {
c2d.beginPath();
c2d.moveTo(halfPath[0][0], halfPath[0][1]);
for (var i = 0; i < halfPath.length; i++) {
var path = halfPath[i];
c2d.bezierCurveTo(
path[1][0], path[1][1], path[2][0], path[2][1],
path[3][0], path[3][1]);
}
for (var i = 0; i < halfPath.length; i++) {
var path = halfPath[halfPath.length - i - 1];
c2d.bezierCurveTo(
-path[2][0], path[2][1], -path[1][0], path[1][1],
-path[0][0], path[0][1]);
}
};
var drawFunc = function (halfPath) {
return function (c2d, x, y, size) {
c2d.save();
c2d.translate(x, y);
c2d.scale(size, size);
drawPath(c2d, halfPath);
c2d.restore();
};
};
var n = 1.0 / 2;
var heartPath = [
[[0, n], [0, n], [n, 0], [n, -n/2]],
[[n, -n/2], [n, -n/2], [n, -n], [n/2, -n]],
[[n/2, -n], [n/2, -n], [0, -n], [0, -n/2]],
];
var diaPath = [
[[0, n], [0, n], [3*n/4, 0], [3*n/4, 0]],
[[3*n/4, 0], [3*n/4, 0], [0, -n], [0, -n]],
];
var clubPath = [
[[0, -n], [0, -n], [n/2, -n], [n/2, -n/2]],
[[n/2, -n/2], [n/2, -n/2], [n, -n/2], [n, 0]],
[[n, 0], [n, 0], [n, n/2], [n/2, n/2]],
[[n/2, n/2], [n/2, n/2], [n/8, n/2], [n/8, n/8]],
[[n/8, n/8], [n/8, n/2], [n/2, n], [n/2, n]],
[[n/2, n], [n/2, n], [0, n], [0,n]],
];
var spadePath = [
[[0, -n], [0, -n], [n, -n/2], [n, 0]],
[[n, 0], [n, 0], [n, n/2], [n/2, n/2]],
[[n/2, n/2], [n/2, n/2], [n/8, n/2], [n/8, n/8]],
[[n/8, n/8], [n/8, n/2], [n/2, n], [n/2, n]],
[[n/2, n], [n/2, n], [0, n], [0,n]],
];
return {
heart: drawFunc(heartPath),
dia: drawFunc(diaPath),
club: drawFunc(clubPath),
spade: drawFunc(spadePath),
dummy: drawFunc([])
};
})();
Raw
usage.html
<!DOCTYPE html>
<html>
<head>
<script src="cardsuits.js"></script>
<script>
window.addEventListener("load", function () {
var canvas = document.getElementById("canvas");
var c2d = canvas.getContext("2d");
CardSuits.heart(c2d, 100, 100, 50);
c2d.stroke();
CardSuits.dia(c2d, 200, 100, 50);
c2d.stroke();
CardSuits.club(c2d, 300, 100, 50);
c2d.stroke();
CardSuits.spade(c2d, 400, 100, 50);
c2d.stroke();
CardSuits.heart(c2d, 100, 200, 50);
c2d.fill();
CardSuits.dia(c2d, 200, 200, 50);
c2d.fill();
CardSuits.club(c2d, 300, 200, 50);
c2d.fill();
CardSuits.spade(c2d, 400, 200, 50);
c2d.fill();
}, false);
</script>
</head>
<body>
<canvas
id="canvas" width="500" height="400"
style="
background-color: gray;
"></canvas>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment