Wednesday, March 15, 2017

Spotify Logo from HTML Code


HTML Code

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function() {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

////////////////////////////////////// start below this line ˇˇˇˇˇˇˇˇˇˇ


//green circle
context.beginPath();
context.arc(400, 300, 200, 0, 2*Math.PI, false); //context.arc(centerx, centerY, radius, 0, 2*Math.PI, false);
context.closePath();
context.fillStyle = "rgb(80, 216, 80)";
context.fill();


//top black line
context.beginPath();
context.moveTo(260, 235);
context.quadraticCurveTo(430, 180, 545, 265); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 36;
context.lineCap = "round";
context.stroke();


//middle black line
context.beginPath();
context.moveTo(280, 295);
context.quadraticCurveTo(410, 240, 515, 318); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 28;
context.lineCap = "round";
context.stroke();


//bottom black line
context.beginPath();
context.moveTo(308, 353);
context.quadraticCurveTo(408, 315, 477, 365); //context.quadraticCurveTo(controlx, controly, endx, endy);
context.lineWidth = 23;
context.lineCap = "round";
context.stroke();


////////////////////////////////////// end above this line ˆˆˆˆˆˆˆˆˆˆˆˆˆˆˆ

};

</script>
</head>
<body>
<canvas id="myCanvas" width="800" height="600"></canvas>
</body>
</html>