Thanks to the visit to an Adidas store last week, the logo stayed in my mind for a long time that it sparked up an interest to implement it using HTML5 canvas API.
The implemented logo is shown below. The text “adidas” has been ignored due to the lack of clear information on the font style used.
The logo contains 3 blocks and have been implemented using the lineTo method of the drawing context class. The code is shown below.
<!DOCTYPE html>
<html>
<head>
<script>
window.onload = function(){
var logo = document.getElementById("logo");
var logoContext = logo.getContext("2d");
logoContext.fillStyle = "black";
logoContext.fillRect(10,10,200,150);
logoContext.strokeStyle = "white";
logoContext.fillStyle = "white";
logoContext.lineWidth = 3;
//Block I
logoContext.beginPath();
logoContext.moveTo(60,100);
logoContext.lineTo(80,100);
logoContext.lineTo(70,85);
logoContext.lineTo(55,96);
logoContext.lineTo(60,100);
logoContext.fill();
logoContext.stroke();
logoContext.closePath();
//Block II
logoContext.beginPath();
logoContext.moveTo(95,100);
logoContext.lineTo(115,100);
logoContext.lineTo(85,60);
logoContext.lineTo(73,71);
logoContext.lineTo(95,100);
logoContext.fill();
logoContext.stroke();
logoContext.closePath();
//Block III
logoContext.beginPath();
logoContext.moveTo(130,100);
logoContext.lineTo(150,100);
logoContext.lineTo(105,30);
logoContext.lineTo(90,43);
logoContext.lineTo(130,100);
logoContext.fill();
logoContext.stroke();
logoContext.closePath();
};
</script>
</head>
<body>
<canvas id="logo"></canvas>
</body>
</html>