what is the canvas tag HTML 5 ?
How we draw a logo using a canvas tag?
var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); canvas.width = 500; canvas.height = 150; canvas.style.border = '1px solid #333333'
context.font = "normal 66px Verdana"; // for text style context.fillStyle = "#000000"; // fill text color context.fillText("[", 50, 70); this is our first text of logo context.font = "normal 26px Verdana"; //logo text context.fillStyle = "#000000"; //logo color you cand add your's context.fillText(" Advance deloper", 60, 50); //logo text context.font = "normal 66px Verdana"; context.fillStyle = "#000000"; context.fillText("]", 280, 70); context.font = "normal 16px Arial"; context.strokeStyle = "#000000"; context.strokeText("A complete blog for Devs", 70, 75);
This is how we can create a simple logo using a canvas tag. Now we want to fill the gradient in our logo. So we need to create a gradient first. Here I m using a linear-gradient for our logo.
var x1 = 0; var y1 = 0; var x2 = 100; var y2 = 0; var logoColor = context.createLinearGradient(x1, y1, x2, y2); logoColor.addColorStop(0 , 'rgb(255, 0, 0)'); logoColor.addColorStop(0.5, 'rgb( 0, 0, 255)'); logoColor.addColorStop(1 , 'rgb( 0, 0, 0)');
Add this code after canvas.style.border, This will generate a linear gradient. Now fill this gradient into your text. Just find context.fillStyle of your text layer and give the logoColor value like this
context.fillStyle = logoColor;
Now your logo is almost ready to use. If you want to add shadow to your logo just put this code in your js after logoColor.addColorstop.
context.shadowOffsetX = 10; context.shadowOffsetY = 10; context.shadowBlur = 4; context.shadowColor = "#66666620";
This will give your logo a decent shadow. Your logo look like this
By using canvas elements you can also add images to your logo. If you want to add animation to the logo you can also give a great effect to your logo by using the below code.
By using this requestAnimationFrame() call back function we can create animations. In this method, you need to draw something or redraw. It means that this function only used where you want to draw or redraw something in your canvas. If you want to read more about requestAnimationFrame follow this link.