Hi! Everyone, in this series of post I am going to discuss about HTML5 CANVAS. I am going to discuss every part of it from the very beginning to advance level.Here, most of the example and theories have benn collected form the WEB and several books. I will share them all in between tutorials and demonstration.
HTML has one of the most powerful tag CANVAS. We often use this as plugin for graph or any shape based plugins. Now I am giving you an oportunity to undefy this weapon and make it as favorite one.
https://msdn.microsoft.com/en-us/library/windows/desktop/ff684178(v=vs.85).aspx
The basic HTML5 CANVAS API holds the context of 2d which helps developer and create various shapes, render text, image and give the power to modify it through gradients, color, transformation and lots more.
Now CANVAS comes with the syntax <canvas></canvas> and we are mention the height and width with an inner text “Your browser does not support HTML5 Canvas.” which will show if your browser does not support HTML5 CANVAS.If you are going to save the code in file in HTML format and open it in a browser it will show nothing, besically its a blank page as we just placed the CANVAS but didnt mention its behaviour.
I placed the script tag before closing the body tag. I will also show how to use with some other ways.
Now the code became:
</head>
<body>
<div class="canvas-wrapper">
<canvas width="500" height="500" id="canvas" >
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript" src="canvas.js"></script>
</body>
</html>
So, we need to create a very basic CANVAS application Hello World, it will be a simple text on the center of the canvas.
Now I am filling the color with the function fillStyle with #ff0000 which stand for RED and set the font family ARIAL and its font size 20 px, bold with by the FONT function. Now it’s time to put the text and append to CANVAS. So in the fillText function I mention “hello world” and we need to mention the coordinate where it will show. So its X and Y axis become 45 and 50.
As if you placed the code into the head positon then the script will run before the document load. addEvenetListener function will holds the function and run after the document loaded successfully.
Another way:
Copy the code and create a project, you just need some time to get familiar with the code. This is most basic CANVAS application. We will take cover more advanced things in our next post.
Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.
HTML has one of the most powerful tag CANVAS. We often use this as plugin for graph or any shape based plugins. Now I am giving you an oportunity to undefy this weapon and make it as favorite one.
Basic introduction:
HTML5 Canvas is an immediate mode bitmapped area of the screen that can be manipulated with JavaScript. Immediate mode refers to the way the canvas renders pixelson the screen. HTML5 Canvas completely redraws the bitmapped screen on every frameby using Canvas API calls from JavaScript.This makes HTML5 Canvas very different from Flash, Silverlight, or SVG, which operatein retained mode. You can get the full idea of retained mode and immediate mode in the following link.https://msdn.microsoft.com/en-us/library/windows/desktop/ff684178(v=vs.85).aspx
The basic HTML5 CANVAS API holds the context of 2d which helps developer and create various shapes, render text, image and give the power to modify it through gradients, color, transformation and lots more.
Get familiar with the Code:
I am assuming you have the basic idea of HTML and HTML5. So you have the idea how the basic HTML page look like and the necessary tags need to build it. Like other, CANVAS is also a HTML5 tag which we can use like .<html>
<head>
<title>Canvas </title>
</head>
<body>
<div class="canvas-wrapper">
<canvas width="500" height="500" id="canvas" >
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
Canvas and JavaScript:
We must have the knowledge of JavaScript for creating any CANVAS element. We prefer to create an external JS file for running CANVAS applications. JavaScript widely supported most of the modern browsers, IE9 so we can run our canvas application independently. So I am creating an external JS file under the JS folder.I placed the script tag before closing the body tag. I will also show how to use with some other ways.
Now the code became:
<html>
<head>
<title>Canvas
</head>
<body>
<div class="canvas-wrapper">
<canvas width="500" height="500" id="canvas" >
Your browser does not support HTML5 Canvas.
</canvas>
</div>
<script type="text/javascript" src="canvas.js"></script>
</body>
</html>
OUR first application, Hello World:
We should start discussing the JavaScript for CANVAS step by step. It’s necessary to get familiar to the JavaScript code and in the meanwhile I will explain each line of code and try cover all the example. If you comment your issues or requirement below, then it will be better to understand your issues.So, we need to create a very basic CANVAS application Hello World, it will be a simple text on the center of the canvas.
var canvas = document.getElementById('canvas');
var contex = canvas.getContext('2d');
contex.fillStyle= "#ff0000";
contex.font="20px arial bold";
contex.fillText('Hello World','45','50');
The output is :
Explanation:
First we need to create an object of the canvas so we taking its object in canvasvariable. Next we need to get the context of the canvas. This method mention all the function for CANVAS. If you debug the code then you will find all the listed functions.JavaScript Position:
If you are unable to place you JavaScript code before the body closing tab then you might need to add the script into the head position. For this you might need to use addEvenetListener().As if you placed the code into the head positon then the script will run before the document load. addEvenetListener function will holds the function and run after the document loaded successfully.
window.addEventListener("load", eventWindowLoaded, false);
function eventWindowLoaded(){
var canvas = document.getElementById('canvas');
var contex = canvas.getContext('2d');
contex.fillStyle= "#ff0000";
contex.font="20px arial bold";
contex.fillText('Hello World','45','50');
}
Another way:
Window.onload = function (){
var canvas = document.getElementById('canvas');
var contex = canvas.getContext('2d');
contex.fillStyle= "#ff0000";
contex.font="20px arial bold";
contex.fillText('Hello World','45','50');
}
Copy the code and create a project, you just need some time to get familiar with the code. This is most basic CANVAS application. We will take cover more advanced things in our next post.
Thanks for visiting.Please support us by shearing our posts and like your social pages.
Please subscribe for our future posts.
No comments:
Post a Comment