Web Development Adventures: HTML5

HTML5 - Canvas Demo

Please read my article that describes various canvas objects and their usage
http://hetalparikh.blogspot.com/2016/03/html5-canvas.html

I created an HTML page with a simple canvas used to draw objects as described below. Note that I have included a seperate javascript file which does the work of drawing the canvas.

An event listener is added that loads the javascript on page load to draw the canvas.

HTML Source

<!DOCTYPE html>
 
<html lang="en">
    <head>
        <meta charset="utf-8" />
         <script src="script.js"></script>
        <title>Demo HTML5 Canvas</title>
    </head>
    <body>
        <section id="CanvasSection">
            <canvas id="canvas" width="500" height="300"></canvas>
        </section>
    </body>
</html>

script.js source code

Demo 1: Draw Rectangle

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(200, 200);
    canvas.lineTo(200, 100);
    canvas.lineTo(400, 200);
    canvas.closePath();

    /*Rectangle Demo*/
    canvas.fillStyle = "#0000ff"; /*fills main canvas blue*/
    canvas.strokeStyle = "#ff0000";/*stroke/draws canvas red*/
 
    canvas.strokeRect(100, 100, 120, 120);/*draws main rectangle*/
    canvas.fillRect(110, 110, 100, 100);/*fills rectangle*/
    canvas.clearRect(130, 130, 30, 30);/*fills rectangle with clear/white space*/
}
addEventListener("load", initiate);

Output

Demo 2: Draw triangle

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(200, 200);
    canvas.lineTo(200, 100);
    canvas.lineTo(400, 200);
    canvas.closePath();
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 3: Fill triangle with default solid

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(200, 200);
    canvas.lineTo(200, 100);
    canvas.lineTo(400, 200);
    canvas.closePath();
    canvas.fill();
}
addEventListener("load", initiate);

Output

Demo 4: Clip Region
function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(200, 200);
    canvas.lineTo(200, 100);
    canvas.lineTo(400, 200);
    canvas.closePath();
    /*Clipping Demo*/
    canvas.clip();
    canvas.beginPath();
    for (var i = 0; i < 400; i = i + 5)
    {
        canvas.moveTo(0, i);
        canvas.lineTo(500, i); 
    }
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 5: Gradient Rectangle Demo

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(200, 200);
    canvas.lineTo(200, 100);
    canvas.lineTo(400, 200);
    canvas.closePath();
   
    /*Linear Gradient Rectangle Demo*/
    var gradient = canvas.createLinearGradient(0, 0, 10, 100);
    gradient.addColorStop(0.5,'#0088FF');
    gradient.addColorStop(1,'#ff0000');
    canvas.fillStyle = gradient;
 
    canvas.fillRect(150, 10, 200, 100);
}
addEventListener("load", initiate);

Output

Demo 6 : Arc - Circle

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.arc(200, 200, 75, 0, Math.PI * 2, false);
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 7 : Arc - 60 Degrees Arc Demo

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    
    /*Arc Demo*/
    //We draw a 60 degrees arc
    //pi = circle.

    //circle/180 = 1 degree.

    //1 degree * 60 = 60 degrees
    var radiansFromDegrees = Math.PI / 180 * 60; 
    canvas.arc(200, 200, 75, 0, radiansFromDegrees, false);
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 8 : Quadratic Curve Demo

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    /*Quadratic Curve Demo*/
    canvas.moveTo(100, 100);
    canvas.quadraticCurveTo(150, 200, 100, 300);
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 9 : Bezier Curve Demo

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(150, 150);
    canvas.bezierCurveTo(50, 100, 200, 150, 100, 250);
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Demo 9 : Bezier Curve Demo - With Line
This draws a square shaped line, dimension 5 units

function initiate() 
{
    var elem = document.getElementById('canvas');
    var canvas = elem.getContext('2d');
    canvas.beginPath();
    canvas.moveTo(150, 150);
    canvas.bezierCurveTo(50, 100, 200, 150, 100, 250);
    canvas.lineWidth = 5;
    canvas.lineCap = "square";
    canvas.stroke();
}
addEventListener("load", initiate);

Output

Web Development Adventures

Saturday, March 5, 2016

HTML5 - Canvas In Action !

HTML Source

script.js source code