Easy jQquery Plugins

Submit plugin Contact ☰

Rectangle

Below example shows how an rectangle could be created using a HTML5 canvas


                <!DOCTYPE HTML>
    <html>
    <head>
    <style>
        body {
            margin: 0px;
            padding: 0px;
        }
        #myCanvas {
            border:1px solid #000;
        }
    </style>
    </head>
    <body>
    <canvas id="myCanvas" width="400" height="350"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var context = canvas.getContext('2d');

        context.beginPath();
        context.rect(100, 125, 200, 100);
        context.fillStyle = '#30cd74';
        context.fill();
        context.lineWidth = 7;
        context.strokeStyle = '#34495e';
        context.stroke();
    </script>
    </body>
    </html>

The above code will create the following result

Explanation

To create a rectangle using HTML5 canvas rect() method of canvas can be used. First two paramenters of rect() are the x and y coordinates of the top left corner of the rectangle. Third parameter is the width of the rectangle and fourth parameter is the height of the rectangle.

Contact Submit plugin