HTML5-making a logo using canvas element
HTML5 is the latest version of HTML language. It is a markup language developed by W3C(World Wide Web Consortium) to implement your coding to develop the structure of your website. It's along with Javascript which is a scripted language to develop websites. You can use this scripted language by executing <script> tag inside the code of the HTML. This is Mashhud and today I'm going to show you some techniques and tricks to develop a structural logo for your website using HTML5. In this case, I've made a HTML5's official logo. You can perform it by programming in many ways but I'm going to represent a specific way.
I'm uploading the pictures of my coding and going to break it out to let you guys know how these functions got interpreted and developed a HTML5 logo as an outcome.
At first,I've assigned the <canvas> tag and inputted the height, width and id name. Then inside the <head> tag, I've commanded the exaggeration of the border of the canvas. Inside the <script> tag (which is a term of Javascript that I've implemented inside of this HTML code) I've named a variable called "ctx" and inside the variable, I've assigned the id of the canvas by document.getElementById("canvas") code.I've also assigned the dimention of the canvas using this getContext("2d") code. Then I wrote the name "HTML" by both fillText() & strokeText() method. Here I've assigned the width of the stroke to 4 pixel and managed the font of the text. Then comes the part of the object under the "HTML" text. Here I've used the beginPath() and moveTo(x_axis,y_axis) method to assign the starting point of the vector. I've also used lineTo() method to give the directions to the structural figure of the logo. Here you can use the closePath() method to end the direction. You have to implement all these methods to make the shape of the figure of the logo. I've specifically used stroke() to put the number of the version at the center of the figure. To give shadows behind all the objects, I've used shadowColor="" method to assign the color of the shadow and other shadow related methods to assign the depth of the shadow. Final part is to close all the tags where needed. Here's the output given below.
you have to be very geometrical when it comes to developing any part of the website using <canvas> feature. I'll suggest to use Chrome instead of other browsers since Chrome is the most markup-friendly browser and it's preferred by all the web developers out there.
Hope this tutorial helped you. stick with us for more informative stuffs.
I'm uploading the pictures of my coding and going to break it out to let you guys know how these functions got interpreted and developed a HTML5 logo as an outcome.
At first,I've assigned the <canvas> tag and inputted the height, width and id name. Then inside the <head> tag, I've commanded the exaggeration of the border of the canvas. Inside the <script> tag (which is a term of Javascript that I've implemented inside of this HTML code) I've named a variable called "ctx" and inside the variable, I've assigned the id of the canvas by document.getElementById("canvas") code.I've also assigned the dimention of the canvas using this getContext("2d") code. Then I wrote the name "HTML" by both fillText() & strokeText() method. Here I've assigned the width of the stroke to 4 pixel and managed the font of the text. Then comes the part of the object under the "HTML" text. Here I've used the beginPath() and moveTo(x_axis,y_axis) method to assign the starting point of the vector. I've also used lineTo() method to give the directions to the structural figure of the logo. Here you can use the closePath() method to end the direction. You have to implement all these methods to make the shape of the figure of the logo. I've specifically used stroke() to put the number of the version at the center of the figure. To give shadows behind all the objects, I've used shadowColor="" method to assign the color of the shadow and other shadow related methods to assign the depth of the shadow. Final part is to close all the tags where needed. Here's the output given below.
you have to be very geometrical when it comes to developing any part of the website using <canvas> feature. I'll suggest to use Chrome instead of other browsers since Chrome is the most markup-friendly browser and it's preferred by all the web developers out there.
Hope this tutorial helped you. stick with us for more informative stuffs.
No comments