learnhtml5canvas
Sunday, 21 April 2019
Sunday, 22 February 2015
html5 Canvas tutorial :Structure of html5 canvas element
html5 Canvas tutorial :Structure of html5 canvas element
Html5 Canvas element has following structure.
<canvas id="myCanvas" height= "200" width="200" style="border: 1px solid #0000ff;">
</canvas>
First thing first:
</canvas>
id="myCanvas"
we have given a
id
to this canvas. We will use this id
when we use Javascript to draw our graphics on the canvas. A page can have more than one canvas, so unique id will serve our purpose of distinction between various canvas elements.If we have two canvas on a page.we will write code for these as.==================
Code for Canvas 1
=================
<canvas id="canvas_1" width="200" height="200" style="border : 1px solid #0000ff;">
</canvas>
==============
Code for canvas 2
</canvas>
==============
=============
<canvas id="canvas_2" width="200" height="200" style="border : 1px solid #0000ff; ">
</canvas>
Our browser will show two rectangles of 200px wide and 200px length.</canvas>
============================================
Two canvas element embed in one page
===========================================
Second thing in canvas is
width="200"
.This part of code set the width of our canvas . Width is the attribute of canvas and 200 is value of width.We always write attribute of HTML element in general formattributeName ="value"
width= 200
not correct.
width ="200"
is correct style.The third thing in our canvas tag is
length="200"
Our last important thing is:
style ="border 1px solid #0000ff;"
The value for
style
is "border 1px solid #000ff;"
In this line border is used to draw border around a specific element. Here we are using border along canvas element.1px means that this border will be 1px wide. You can set different value for border and check the result.
solid
is style of border. Border can have different styles such as dotted, solid, double, inset, outset, groove and ridge
then there is something
#0000ff
This is color for border. Color can be represent by different way. You can set name of color such as red ,green ,blue.
In RGB format, six hexadecimal digits are used to represent the value of color. Here R stands for Red ,G for Green and B for Blue.
=============================================================
html5 canvas tutorials live demo on codepen
===========================================================<canvas id="myCanvas" width="600" hight ="400">
</canvas>
<canvas id="myCanvas2" width="600" hight ="400">
</canvas>
See the Pen pvVjYv by aslam (@aslamwaqar) on CodePen.
--------------------------------------------------------------------------------------------------
For further reading visit
www.html5canvastutorials.com
Thursday, 8 January 2015
html5 canvas tutorial drawing a simple line using html5 canvas
how to draw a line using html5 canvas
We can draw lines and other shapes on canvas.line is the simplest element of graphic.Any shape can be drawn by line .There are many type of lines.In our present html5 canvas tutorial we will draw a straight line.Any line can have minimum two points. one point is starting of line and other is the closing of line.In canvas we use
moveTo()
method .This method takes two argument:
1: x
2:y1: y coordinate of start of line
General form of moveTo method is:
moveTo(x1,y1)
where x1 stands for x coordinate of starting point of line and y1 stands for y coordinate of starting point of line
example of moveTo
method ismoveTo(100,150);
After setting the starting point of line, we set closing point of line ,in other words second point of line.For this purpose we use the
lineTo()
method.This method takes two argument :
1. x2: x coordinate of closing point of line 2. y2: y coordinate of closing point of line. General form of method will be:
lineTo(x2,y2);
where x2 stands for x coordinate of closing or second point of line and y2 stands for y coordinate of closing or second point of line. Example of
lineTo()
method is:
lineTo(500,50);
For start of any path we use method
beginPath()
which has folowing structure
context.beginPath();
After declaring canvas and context object ,the line drawn the line from point
(100,150) to (500,50).
the code for the drawing line using html5 canvas
context.beginPath();
context.moveTo(100,150);
context.lineTo(500,50);
There is a problem with this code.line will not be visible on the canvas .To make line visible we use the method stroke()
.
we will write the code for visibility of line
context.stroke();
FULL CODE OF DRAWING LINE ON CANVAS.
<!DOCTYPE html>
<html>
<head>
<title>
Drawing a line on canvas
</title>
</head>
<body>
<canvas id ="myCanvas" width="600" height ="200" >
</canvas>
<script>
// declare canvas and context variable for drawing
var canvas =document.getElementById("myCanvas");
var context = canvas.getContext('2d');
//start to draw
context.beginPath();
//start of line:first point
context.moveTo(100,150);
// end of line : second point
context.lineTo(500,50);
// set line width and color of line
context.lineWidth=10;
context.strokeStyle="blue";
// make line visible
context.stroke();
</script>
</body>
</html>
canvas-line.html
when we see the html document in browser .We will see the follwing shape of line.
html5 canvas tutorial drawing smple line using html5 canvas
html5 canvas tutorial drawing simple line using html5 canvas live demo on codepen
<html>
<head>
<title>
Drawing a line on canvas
</title>
</head>
<body>
<canvas id ="myCanvas" width="600" height ="400" >
</canvas>
</body>
</html>
See the Pen KwRVgV by aslam (@aslamwaqar) on CodePen.Monday, 5 January 2015
html5 canvas tutorials: html5 canvas introduction
html5 canvas tutorial: introduction
<canvas>Canvas is a new tag of html introduced in HTML5.As you know all html tags are container , canvas is container for HTML graphics. We can draw graphics such as line,boxes,circle and other shapes on HTML page in
canvas
Canvas element has start and close tag .We write
canvas
element as
<canvas>
</canvas>
height
and
length
.These attribute set the size of canvas on HTML page. Actually we use JavaScript
methods (API) to draw graphics. Simplest page with canvas element will be.how to embed html5 canvas tag in html5 document
<!DOCTYPE html>
<html>
<head>
<title>
HTML Canvas example
</title>
</head>
<body>
<canvas id ="myCanvas" width ="200" height ="200">
</canvas >
</body>
</html>
mycanvas.html
when we see this document in browser .we will see a blank page. Dont worry our canvas is present but hidden. To see canvas we will add style to our canvas. We will modify our Canvas tag as
<canvas width ="200" height ="200" style="border: 1px solid #0000ff;">
</canvas>
Modified HTML Document
<!DOCTYPE html>
<html>
<head>
<title >
HTML canvas example
</title>
</head>
<body>
<canvas height="200" width="200" style="border:1px solid #0000ff;>
</canvas>
</body >
</html>
Congratulation !
Our canvas in blue color rectangle is present in our web page. We have now canvas and we can draw
second lesson: conversion from html to html5
To convert a html document into html5 document.We need only one line
We add this one line at the top of our previous document. The line is.<!DOCTYPE html>
Our updated helloworld document will be as:
We add this one line at the top of our previous document. The line is.
Our updated helloworld document will be as:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
hello world html5
</body>
</html>
This line
<!DOCTYPE html>
inform the browser that the document is valid html5 document
live demo on codepen
<html>
<head>
</head>
<body>
hello world html5
</body>
</html>
See the Pen bNMVPy by aslam (@aslamwaqar) on CodePen.Friday, 2 January 2015
first lesson html5canvas
html5 canvas first tutorial
html is the standard language for presenting content on the world Wide web. we want to show "hello World " on a web page ,then html is responsible for presentation of content.If we want to give some style to "hello world" then we use CSS.CSS is the language for styling of the content.If we want to animate"hello world" then we use javascript. in brief words: html for content css for style javascript for functionalityhtml consist of some tages. these tags are used to handle data.These tags are Every web page is enclode in html tag.HTML tag following structure.
Every web page can be considered a big carton, whose label is html.In this
carton,there are two major cartons in html carton.these are head and HEAD Head container can conatins other container.Such as title, link,script,meta tags .
In head section things are hidden .
they are not visible in browser except title which is shown on browser bar. BODY Body tag is responsible for presentation of data.It can contain many other tags or
containers. Simple Web Page Structure: Simplest web page will contain following tags and structure. Every web page is saved with .html extension. If we save our page with the name
helloworld. we will give it extension helloworld.html. After saving the file,
we can open it in web clicking the file,we can open web page by writing the
address of file in web browsers. If file address is C:\Webpages\helloworld.html. then we will write C:\webpages\helloworld.html In address bar of browser. we will see "helloworld" .web page in our browser
window.live demo on codepenSee the Pen ByxQGw by aslam (@aslamwaqar) on CodePen.<html> <head> </head> <body> Hello World </body> </html>
Subscribe to:
Posts (Atom)