Fiverr Forum

Using HTML5 and JavaScript to design your company logo for your website


#1

If we wanted an image in a web application before, we’d traditionally open our graphics
software of choice, create an image, and embed it on our page with an
tag. If we wanted animations, we’d use Flash. But now, with HTML5, its easy to do this.

in this tutorial, I will teach you how to do that.


The above image is our company logo. And this is how I did it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Coa</title>
    </head>
    <body>
        <canvas id="logo" width="900" height="80">
            <h1>COA</h1>
        </canvas>

        <script>
        //function that draw the logo. I create a JavaScript function for drawing the
        var drawLogo = function(){
            var canvas = document.getElementById('logo');
            var context = canvas.getContext("2d");

            //applying gradient
            var gradient = context.createLinearGradient(0, 0, 0, 40);
            gradient.addColorStop(0, "#aa0000");
            gradient.addColorStop(1, "#ff0000");

           // use the strokepath,beginPath() and closePath() methods to start drawing a line, stroke and close when finish
            context.fillStyle = gradient;
            context.strokeStyle = gradient;

            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(0, 40);
            context.lineTo(30, 0);
            context.lineTo(60, 40);
            context.lineTo(285, 40);

            context.fill();
            context.closePath();

            //adding text
            context.font = "italic 40px 'Arial'";
            context.fillText("Coa", 60,36);

            //Moving the Origin so as to fit the square under the triangle 
            context.save();
            context.translate(20, 20);
            context.fillRect(0, 0, 20, 20);

            //use a path to draw the inner triangle
            context.fillStyle("#ffffff");
            context.strokeStyle("#ffffff");

            context.lineWidth = 2;
            context.beginPath();
            context.moveTo();
            context.lineTo(0, 20);
            context.lineTo(10, 0);
            context.lineTo(20, 20);
            context.lineTo(0, 20);

            context.fill();
            context.closePath();
            context.restore();
        };

       //Then invoke this method after first checking for the existence of the <canvas> element
        var canvas = document.getElementById("logo");

        if(canvas.getContext){
            drawLogo();
        }

    </script>
    </body>
</html>

You can try it yourself on your pc.
Step 1: Click on start menu(if you are a window user and don’t have an ide or a good editor).
Step 2: Click on notepad on the system.
Step 3: Copy the codes and paste them in notepad and save it as index.html (Make sure you save it on the desktop and this is for easy reference).
Step 4: On the desktop page, find and locate index.html(You will see your browser default logo on it to let you know is meant for the browser)