JSFiddle - React, Tailwind, and code Playground

by Dotmh

HTML

<!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>

JavaScript

(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));