articles

Home / DeveloperSection / Articles / Code for Designing Any Types of Logos in HTML5

Code for Designing Any Types of Logos in HTML5

Arti Mishra 1675 11-May-2018

HTML5 is the latest version of HTML. It is more powerful & light weight web application language that is used for design responsive WebPages.

HTML5 is developed by co-operation of two organisation W3C (World Wide Web Consortium) and WHATWG (Web Hypertext Application Technology Working Group)  and started to develop from 2000 and after that it is commercially launch by Google in 2012.

HTML5 is combination of different languages like -

HTML4 + JS + XML + XHTML1.0 + CSS = HTML5.


In HTML5 the canvas & SVG is a powerful tool by which you can create different type of images, logos, animated images, games etc. By the help of JavaScript & HTML5 code, you can create our own images without using any third party tools like Photoshop, coral-draw etc.


Code for Designing HTML5 logos -

Example : 1

<!DOCTYPE html>

<html>
<head><title> Canvas Example </title>
<meta charset="UTF-8">
<script>
function loader()
{
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
var rgrd=ctx.createRadialGradient(190,110,5,220,150,180); 
   rgrd.addColorStop(0.3,"black");
   rgrd.addColorStop(1.0,"#999999");
  ctx.beginPath();
  ctx.lineWidth='15';
  ctx.strokeStyle='black';
  ctx.moveTo(215,120);
  ctx.lineTo(215,180);
  ctx.stroke();
  ctx.beginPath();
  ctx.fillStyle=rgrd;
  ctx.strokeStyle='#999999';
  ctx.lineWidth='2';
  ctx.moveTo(70,230);
  ctx.lineTo(150,140);
  ctx.lineTo(230,230);
  ctx.lineTo(210,230);
  ctx.lineTo(150,170);
  ctx.lineTo(90,230);
  ctx.lineTo(70,230);
  ctx.fill();
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth='2';
  ctx.fillStyle='maroon';
  ctx.strokeStyle='maroon';
  ctx.translate(230,0);
  ctx.moveTo(70,230);
  ctx.lineTo(150,140);
  ctx.lineTo(230,230);
  ctx.lineTo(210,230);
  ctx.lineTo(150,170);
  ctx.lineTo(90,230);
  ctx.lineTo(70,230);
  ctx.fill();
  ctx.closePath();
  ctx.stroke();

  ctx.beginPath();
  ctx.lineWidth='2';
  ctx.fillStyle=rgrd;
  ctx.strokeStyle='white';
  ctx.translate(-160,-120);
  ctx.scale(1.3,1.5);
  ctx.moveTo(70,230);
  ctx.lineTo(150,140);
  ctx.lineTo(230,230);
  ctx.lineTo(210,230);
  ctx.lineTo(150,170);
  ctx.lineTo(90,230);
  ctx.lineTo(70,230);
  ctx.fill();
  ctx.stroke();
 
ctx.beginPath(); 
  ctx.fillStyle='black';
  ctx.rect(58,208,7,7);
  ctx.rect(140,200,18,20);
  ctx.rect(235,208,8,8);
  ctx.fill();
  ctx.stroke();
 
ctx.beginPath(); 
 // ctx.scale(1.5,1);
  ctx.font="bolder 5em Copperplate Gothic";
  ctx.fillText("D",5,300);
  ctx.font="bolder 3.8em Copperplate Gothic";
  ctx.fillText("LUGOS",70,300);
     ctx.stroke();

  ctx.beginPath();
  ctx.fillStyle='maroon';
  ctx.font="bolder 2.2em Copperplate Gothic";
  ctx.fillText("C",25,330);
  ctx.font="bolder 1.8em Copperplate Gothic";
  ctx.fillText("ONSTRUCTION",53,330);
     ctx.stroke();
}
</script> 
</head>
<body onLoad="loader();"bgcolor="#999999">
<center>
<h1>Canvas Example</h1>
<table bordercolor="#000000">
<tr><td bgcolor="#000000">
<canvas id="myCanvas"height="500"width="500"style="background-color:#FFFFFF">
</canvas>
</td>
<td bgcolor="#000000">
<img src="logos/dlugos.png" height="500"width="500">
</td></tr></table>
</center>
</body>
</html>

OUTPUT :

Code for Designing  Any Types of Logos in HTML5


Example : 2

<!DOCTYPE html> 
<html>
<head><title> Canvas Example </title>
<meta charset="UTF-8">
<script>
function loader() 
{
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
   ctx.beginPath();
   ctx.strokeStyle='#CC0000';
   ctx.lineCap='round';
   ctx.lineWidth=70;
   ctx.moveTo(40,40);
   ctx.lineTo(140,40);
   ctx.stroke();

   ctx.beginPath();
   ctx.strokeStyle='#000066';
   ctx.lineCap='round';
   ctx.lineJoin='round';

   ctx.lineWidth=60;
   ctx.moveTo(140,130);
   ctx.lineTo(40,130);
   ctx.lineTo(40,240);

   ctx.moveTo(220,30);
   ctx.lineTo(220,240);

   ctx.moveTo(300,30);
   ctx.lineTo(300,240);
   ctx.lineTo(400,240);
   ctx.lineTo(490,30);
   ctx.lineTo(560,240);
   ctx.lineTo(480,240);
   ctx.stroke();

</script> 
</head>
<body onLoad="loader();"bgcolor="#3333CC">
<center>
<h1>Canvas Example</h1>
<table bordercolor="#000000">
<tr><td bgcolor="#000000">
<canvas id="myCanvas"height="300"width="600"style="background-color:#FFFFFF">
</canvas>
</td>
<td bgcolor="#000000">
<img src="LOGOS/img.png" height="300"width="600">
</td></tr></table>
</center>
</body>
</html>

Output :

Code for Designing  Any Types of Logos in HTML5


Example 3 :

<!DOCTYPE html> 
<html>
<head><title> Canvas Example </title>
<meta charset="UTF-8">
<script>
function loader() 
{
 var c=document.getElementById("myCanvas");
 var ctx=c.getContext("2d");
 ctx.beginPath();
 ctx.lineWidth=10;
 ctx.scale(0.8,1);
    ctx.arc(300,250,190,0,7);
 ctx.strokeStyle='#CCCCCC';
 ctx.fillStyle="black";
 ctx.fill();
 ctx.stroke();
 ctx.closePath();

 ctx.beginPath();
 ctx.arc(300,250,100,0,7);
 ctx.fillStyle="white";
 ctx.fill();
 ctx.stroke();
 ctx.closePath();

 ctx.beginPath();
 ctx.moveTo(300,150);
 ctx.lineTo(300,250);
 ctx.lineTo(200,250);
 ctx.arc(300,250,100,3,5);
 ctx.lineWidth=5;
 ctx.fillStyle="#3366FF";
 ctx.fill();
 ctx.stroke();
 ctx.closePath();

 ctx.beginPath();
 ctx.moveTo(300,350);
 ctx.lineTo(300,250);
 ctx.lineTo(400,250);
 ctx.arc(300,250,100,6.6,1.6);
 ctx.fillStyle="#3366FF";
 ctx.fill();
 ctx.stroke();
 ctx.closePath();

 ctx.beginPath();
 ctx.moveTo(300,152);
 ctx.lineTo(300,348);
 ctx.strokeStyle='black';
 ctx.moveTo(202,250);
    ctx.lineTo(398,250);
 ctx.stroke();
 ctx.closePath();

 ctx.fillStyle="white";
 ctx.font="small-caps bold 5em Microsoft Sans Serif";
 ctx.fillText("M",262,142);
 ctx.rotate(-0.5);
 ctx.fillText("B",72,260);
 ctx.rotate(1.2);
 ctx.fillText("W",360,-110);
ctx.stroke();  
}
</script> 
</head>
<body onLoad="loader();"bgcolor="#3366FF">
<center>
<h1>Canvas Example</h1>
<table bordercolor="#000000">
<tr><td bgcolor="#000000">
<canvas id="myCanvas"height="500"width="600"style="background-color:#FFFFFF">
</canvas>
</td>
<td bgcolor="#000000">
<img src="LOGOS/BMW.jpg" height="500"width="600">
</td></tr></table>
</center>
</body>
</html>

Output :

Code for Designing  Any Types of Logos in HTML5


Updated 07-Sep-2019

Leave Comment

Comments

Liked By