Canvas Rotate Rectangle

by Prasanna Brabourame

HTML

<header>

        <h1>
            <font style="color: orangered;"><i>P</font>rasanna Brabourame</i></h1>
        <h4>Software Developer</h4>
    </header>
    <nav>
        <ul>
            <li>
                <a>Rectangle Rotation</a>
            </li>
        </ul>
    </nav>

    <div id="container">
        <div id="left">
            <section id="SecFormD">
                <ul>
                    <li>
                        Roatated Rectangle
                    </li>
                    <li>
                        Angle: <span id="angVal">0</span>&deg;<br>
                    </li>
                    <li>
                        <input id="ang" type=text min=0 max=360 value=0>
                    </li>
                    <li>
                        <span>X1 :</span><span id="infox1" type=text></span>

                    </li>
                    <li>
                        <span>Y1 :</span><span id="infox2" type=text></span><br>

                    </li>
                    <li>
                        <span>X2 :</span><span id="infox3" type=text></span>

                    </li>
                    <li>
                        <span>Y2 :</span><span id="infox4" type=text></span><br>
                    </li>
                    <li>
                        <span>X3 :</span><span id="infoy1" type=text></span>

                    </li>
                    <li>
                        <span>Y3 :</span><span id="infoy2" type=text></span><br>

                    </li>
                    <li>
                        <span>X4 :</span><span id="infoy3" type=text></span>

                    </li>
                    <li>
                        <span>Y4 :</span><span id="infoy4" type=text></span><br>
                    </li>
                </ul>
            </section>
        </div>
        <div id="main">
            <article>
                <canvas id=demo width=300 height=300></canvas>
            </article>
        </div>
    </div>

    <div...

CSS

html {
        min-height: 100%;
        position: relative;
        margin: 0;
    }
    
    body {
        height: 100%;
        margin: 0px !important;
        padding: 0px !important;
    }
    
    canvas {
        background: #9e3535;
    }
    
    .ctrl {
        color: black;
        float: left;
        margin: 100px 0 0 30px;
    }
    
    li a {
        display: block;
        float: left;
        padding: 10px;
        text-decoration: none;
        color: white;
        font-size: 22px;
    }
    
    li a:hover {
        background-color: goldenrod;
    }
    
    nav ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: orangered;
    }
    
    h1 {
        display: block;
        text-align: center;
    }
    
    h4 {
        text-align: center;
    }
    
    iframe {
        background-color: white;
    }
    
    footer {
        position: fixed;
        bottom: 0;
        margin-bottom: 0px;
        background-color: orangered;
        color: white;
        font-size: 15px;
        text-align: right;
        width: 100%;
    }
    
    header {
        color: black;
    }
    
    #SecFormD {
        background-color: #313a73;
        color: white;
    }
    
    #SecFormD ul {
        list-style-type: none;
        padding: 15px;
        margin: 0 !important;
    }
    
    #SecFormD ul li {
        padding: 10px;
    }
    
    #container {
        position: relative;
        overflow: hidden;
    }
    
    #left {
        float: left;
        width: 25%;
        height: 100%;
    }
    
    #main {
        position: relative;
        margin-left: 25%;
    }

JavaScript

window.onload = function() {
    var ctx = demo.getContext('2d'),
        isAnim = false,
        angle = 0,
        rect = [50, 100, 200, 100];

    function drawRect(angle) {
        var px = demo.width * 0.5,
            py = demo.height * 0.5,
            ar = angle * Math.PI / 180,
            c1, c2, c3, c4, b1 = {},
            bx1, by1, bx2, by2, bounds;
        ctx.clearRect(0, 0, demo.width, demo.height);
        ctx.strokeStyle = '#aaa';
        // ctx.translate(rect[0] + rect[2] / 2, rect[1] + rect[3] / 2);
        ctx.translate(px, py);
        ctx.rotate(ar);
        ctx.strokeRect(rect[0] - px, rect[1] - py, rect[2], rect[3]);
        ctx.rotate(-ar);
        // ctx.translate(rect[0] + rect[2] / 2, rect[1] + rect[3] / 2);
        ctx.translate(-px, -py);
        c1 = getCorner(px, py, rect[0], rect[1], ar);
        c2 = getCorner(px, py, rect[0] + rect[2], rect[1], ar);
        c3 = getCorner(px, py, rect[0] + rect[2], rect[1] + rect[3], ar);
        c4 = getCorner(px, py, rect[0], rect[1] + rect[3], ar);
        bx1 = Math.min(c1.x, c2.x, c3.x, c4.x);
        by1 = Math.min(c1.y, c2.y, c3.y, c4.y);
        bx2 = Math.max(c1.x, c2.x, c3.x, c4.x);
        by2 = Math.max(c1.y, c2.y, c3.y, c4.y);
        bounds = [bx1, by1, bx2 - bx1, by2 - bx1];
        var diffX = rect[0] - px;
        var diffY = rect[1] - py;
        var distance = Math.sqrt(diffX * diffX + diffY * diffY);
        var maxBound = [px - distance, py - distance, distance * 2, distance * 2];
        infox1.innerHTML = ((c1.x + 0.5));
        infox2.innerHTML = ((c1.y + 0.5));
        infox3.innerHTML = ((c2.x + 0.5));
        infox4.innerHTML = ((c2.y + 0.5));
        infoy1.innerHTML = ((c3.x + 0.5));
        infoy2.innerHTML = ((c3.y + 0.5));
        infoy3.innerHTML = ((c4.x + 0.5));
        infoy4.innerHTML = ((c4.y + 0.5));

    }

    function getCorner(pivotX, pivotY, cornerX, cornerY, angle) {
        var x, y, distance, diffX, diffY;
        diffX = cornerX - pivotX;
       ...