Category Archives: HTML5

HTML5

Create links in HTML Canvas.

Write the javascript part in the head section of the html page.

<script>
    var Links = new Array(); // Links information
    function Draw_Rectangle(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor, text) {
        var Context2d = Canvas.getContext('2d');
        if (Context2d) {
            //Draw Rectangle
            Context2d.strokeStyle = Line_Color;
            Context2d.lineWidth = LINE_WIDTH;
            Context2d.fillStyle = FillColor;
            Context2d.fillRect(Left_Position, Top_Position, Width, Height);
            Context2d.strokeRect(Left_Position, Top_Position, Width, Height);
            //Add Text to Rectangle
            Context2d.textBaseline = 'middle';
            Context2d.font = '8px Arial';
            Context2d.fillStyle = 'white';
            var textX = Left_Position + Width / 2 - Context2d.measureText(text).width / 2;
            var textY = Top_Position + Height / 2;
            Context2d.fillText(text, textX, textY);
            //Create links in HTML Canvas
            Context2d.beginPath();
            var linkWidth = Context2d.measureText(text).width;
            var linkHeight = parseInt(Context2d.font); // Get lineheight out of fontsize
            Context2d.moveTo(textX, textY + linkHeight);
            Context2d.lineTo(textX + linkWidth, textY + linkHeight);
            Context2d.lineWidth = 1;
            Context2d.strokeStyle = "#000000";
            Context2d.stroke();

            Canvas.addEventListener("mousemove", on_mousemove, false);
            Canvas.addEventListener("click", on_click, false);

            // Add link params to array
            Links.push(textX + ";" + textY + ";" + linkWidth + ";" + linkHeight + ";" + text + ";" + "http://www.codesolution.org/");
        }
    }

    // Link hover
    function on_mousemove(ev) {
        var x, y;

        // Get the mouse position relative to the canvas element
        if (ev.layerX || ev.layerX == 0) { // For Firefox
            x = ev.layerX;
            y = ev.layerY;
        }

        // Link hover
        for (var i = Links.length - 1; i >= 0; i--) {
            var params = new Array();

            // Get link params back from array
            params = Links[i].split(";");
            var linkX = parseInt(params[0]),
                linkY = parseInt(params[1]),
                linkWidth = parseInt(params[2]),
                linkHeight = parseInt(params[3]),
                text = params[4],
                linkHref = params[5];

            // Check if cursor is in the link area
            if (x >= linkX && x <= (linkX + linkWidth) && y >= linkY && y <= (linkY + linkHeight)) {
                document.body.style.cursor = "pointer";
                hoverLink = linkHref;
                break;
            }
            else {
                document.body.style.cursor = "";
                hoverLink = "";
            }
        };
    }

    // Link click
    function on_click(e) {
        if (hoverLink) {
            window.open(hoverLink);
        }
    }
</script>


Write the html part in the body section of the html page.

<canvas id='Canvas' width='500' height='500'></canvas>
<script>Draw_Rectangle(Canvas, 100, 100, 100, 50, '#FFFFFF', 1, '#6ed629', 'CodeSolution.org');</script>

HTML5 Canvas Rectangle With Text Hyperlink

HTML5 Canvas Rectangle With Text Hyperlink

Add text to Shapes in Canvas HTML5.

Write the javascript part in the head section of the html page.

<script>function Draw_Rectangle(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor, text) {
var Context2d = Canvas.getContext('2d');
if (Context2d) {
    //Draw Rectangle
    Context2d.strokeStyle = Line_Color;
    Context2d.lineWidth = LINE_WIDTH;
    Context2d.fillStyle = FillColor;
    Context2d.fillRect(Left_Position, Top_Position, Width, Height);
    Context2d.strokeRect(Left_Position, Top_Position, Width, Height);
    //Add Text to Rectangle
    Context2d.textBaseline = 'middle';
    Context2d.font = '8px Arial';
    Context2d.fillStyle = 'white';
    var textX = Left_Position + Width / 2 - Context2d.measureText(text).width / 2;
    var textY = Top_Position + Height / 2;
    Context2d.fillText(text, textX, textY);
}
}
</script>


Write the html part in the body section of the html page.

<canvas id='Canvas' width='500' height='500'></canvas>
<script>Draw_Rectangle(Canvas, 100, 100, 100, 50, '#FFFFFF', 1, '#6ed629', 'CodeSolution.org');</script>

HTML5 Canvas Rectangle With Text

HTML5 Canvas Rectangle With Text

Draw Oval in Canvas HTML5.

Write the javascript part in the head section of the html page.

<script>
    function Draw_Oval(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor) {
        var Context2d = Canvas.getContext('2d');
        var centerX = Left_Position;
        var centerY = Top_Position;
        var radius = 50;       
        Context2d.save();       
        Context2d.translate(Canvas.width / 2, Canvas.height / 2);       
        Context2d.scale(Width, Height);       
        Context2d.beginPath();
        Context2d.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);      
        Context2d.restore();       
        Context2d.fillStyle = FillColor;
        Context2d.fill();
        Context2d.lineWidth = LINE_WIDTH;
        Context2d.strokeStyle = Line_Color;
        Context2d.stroke();
    }
</script>


Write the html part in the body section of the html page.

<canvas id='Canvas' width='500' height='500'></canvas>
<script>Draw_Oval(Canvas, 0, 0, 1, 1, '#000000', 2, '#6ed629');</script>


HTML5 Canvas Oval

HTML5 Canvas Oval

Draw Line in Canvas HTML5.

Write the javascript part in the head section of the html page.

<script>
    function Draw_Line(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH) {
        var Context2d = Canvas.getContext('2d');
        Context2d.beginPath();
        Context2d.moveTo(Left_Position, Top_Position);
        Context2d.lineTo(Width, Height);
        Context2d.lineWidth = LINE_WIDTH;
        // set line color
        Context2d.strokeStyle = Line_Color;
        Context2d.stroke();
    }
</script>


Write the html part in the body section of the html page.

 <canvas id='myCanvas' width='500' height='500'></canvas>
 <script>Draw_Line(myCanvas, 200, 20, 20, 20, '#000000', 5);</script>


HTML5 Canvas Line

HTML5 Canvas Line

Draw Rectangle in Canvas HTML5.

Write the javascript part in the head section of the html page.

<script>
function Draw_Rectangle(Canvas, Left_Position, Top_Position, Width, Height, Line_Color, LINE_WIDTH, FillColor) {
            var Context2d = Canvas.getContext('2d');
            if (Context2d) {
                //Draw Rectangle
                Context2d.strokeStyle = Line_Color;
                Context2d.lineWidth = LINE_WIDTH;
                Context2d.fillStyle = FillColor;
                Context2d.fillRect(Left_Position, Top_Position, Width, Height);
                Context2d.strokeRect(Left_Position, Top_Position, Width, Height);               
        }
</script>


Write the html part in the body section of the html page.

<canvas id='myCanvas' width='1180' height='1020'></canvas>
<script>Draw_Rectangle(myCanvas, 100, 100, 100, 50.00, '#FFFFFF',1, '#6ed629');</script>

HTML5 Canvas Rectangle

HTML5 Canvas Rectangle

Open modal popup in HTML5.

Open a modal pop in HTML5 is very simple with the help of CSS3.
HTML Part

<a href="#Modal">Modal Popup</a>
<div id="Modal" class="modalDialogBox">
    <div>
        <a href="#close" title="Close" class="closeButton">X</a>
        <h2>Modal Popup window</h2>
        <table style="width: 100%">
            <tr>
                <td>Description - CSS3 make it simple to open a modal popup.</td>
            </tr>
        </table>
    </div>
</div>


CSS Part

<style>
.modalDialogBox{
            position: fixed;
            font-family: Arial, Helvetica, sans-serif;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: rgba(0,0,0,0.8);
            z-index: 99999;
            opacity: 0;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            pointer-events: none;
        }

        .modalDialogBox:target {
            opacity: 1;
            pointer-events: auto;
        }

        .modalDialogBox > div {
            width: 600px;
            position: relative;
            margin: 20% auto;
            padding: 5px 20px 13px 20px;
            border-radius: 10px;
            background: #fff;
            background: -moz-linear-gradient(#fff, #999);
            background: -webkit-linear-gradient(#fff, #999);
            background: -o-linear-gradient(#fff, #999);
        }

        .closeButton{
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            box-shadow: 1px 1px 3px #000;
        }
        .closeButton:hover {
            background: #00d9ff;
        }
    </style>