(function($) {
$.fn.rounded = function(options) {
var canvas = this;
console.log(options);
var context = canvas.get(0).getContext("2d");
var rectX = options.x;
var rectY = options.y;
var cornerRadius = options.rad;
var rectWidth = options.width;
var rectHeight = options.height;
context.lineJoin = "round";
context.lineWidth = cornerRadius;
context.strokeRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
context.fillRect(rectX + (cornerRadius / 2), rectY + (cornerRadius / 2), rectWidth - cornerRadius, rectHeight - cornerRadius);
};
}(jQuery));
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#canvas
{
width: 640px;
heigt: 480px;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script type="text/javascript" src="js/libs/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="js/rounded.js"></script>
<script type="text/javascript">
//<[CDATA[
$('#canvas').rounded({x:50,y:50,radius:50,width:100,height:100})
//]]>
</script>
</html>