Print Shortlink

Adidas Logo using HTML5 Canvas API

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>

Leave a Reply


8 + = eleven