CANVAS BASICS
What is Canvas :
HTML <canvas> element is an element which can be used to draw graphics via scripting (usually JavaScript). For example, it can be used to draw graphs, make photo compositions, create animations and many more.Canvas is like a drawing paper and you are the painter.You can paint your own canvas as you wise.Some function which is easy to emplement is your pencil.There are differnet tools all of them give you different drawing experienc.
Creating Enviornment:
Before starting painting on your own imaginary canvas you have to create a environment where you may permit to draw.You must use the getContext objects and pass a string 2d in it.So getContext is a tool box where have all the necessary properties and methods.Like your tool box.Every painter have a box where he or she kept her/him necessary tools.You may compare getContext object with your tool box where have necessary instrument to start draw on the canvas.<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Basic</title>
<script type="text/javascript">
var can=document.getElementById("mc");
var mc=can.getContext('2d');
</script>
</head>
<body>
<canvas id="mc" width="400" height="300">
here write fallback content is browser does not support canvas then render it.
</canvas>
</body>
</html>
You have to Know before start with canvas:
Canvas mainly draw shapes with the help of javascript.So you have some knowledge of Javascript like Dom.
X and Y cordinate:
Canvas is a Box .Everytime you go to draw something on it you specify the starting and ending position using X and Y cordinate.X represent left to right position and Y represent top to bottom positon.Suppose you have a blank paper and in this blank paper you want to write something.To to this,First of all you have to deceide from where to start,how much margin or blank space remain in left side of the paper and then you deceide how much blank space you remain on top.Here we can say that left side blank space meansu X and top side blank space means Y(this is not actuall defination but for remember purpose).
Description:
We know that X values goes left to right.The canvas top left to top right line is X which is divided by several parts by drawing line top to bottom by orange color. if you want to divid any horizontal lines then you have to draw some vertical line to divid it.I do the same job here.The number increase 50 each time this done by for loop.We also know that Y values goes top to bottom.The canvas top left to bottom left line are Y because this line goes top to bottom.Again we divided this vartical line by drawing some horizontal line which is marked by green color.
shapes position:
Yellow:Look carefully its X value is 250(Which is above Top) and Y value is 150(which is straight left).This rectangular three orange line far that means 50*3=150 px left and 5 lines away from top 5*5=250 px bottom.Here left means X and bottom means Y.
So this shape 150px left and 250px down.
Now Your turn ges the other two rectangular position;
Draw Rectangular:
Fill Rect :
We can draw a box by using fillRect method.Fill Rect Means we Fill the Rectangular.It takes several argument.fillRect(X position,Y position,width,height)
Now First of all you have to deceide from where you are going to start you rectangular.This is the first two parameter.Suppose you start your rectangular from 20px left(X position),50px down from top(Y position),250px width,120px height.
<canvas height="200" id="mc" width="500"> </canvas>
<script type="text/javascript">
var can=document.getElementById("mc");
var mc=can.getContext('2d');
mc.fillStyle="green";
mc.fillRect(20,50,250,120);
mc.fill();
</script>
</div>
FillStyle:
This is the area you mark for filling Rectangular,But how this marked area filled.Obviously by color.So you have to Declare the fillStyle="name of color"Stroke Rect:
strokeRect are same but it only marked the area by border instant of filling up hole area.<canvas height="200" id="mc" width="500"> </canvas>
<script type="text/javascript">
var can=document.getElementById("mc");
var mc=can.getContext('2d');
mc.strokeStyle="green";
mc.lineWidth=5;
mc.strokeRect(20,50,250,120);
mc.stroke();
</script>
</div>
Stroke Style:
Like fillStyle you have to specify how the boundary of the stroke will fill by using strokeStyle="name of color".lineWidth:
Before you draw any line or archs you have to tell the browser the width of the line.Before you draw a stroke Rectangualar you have to specify how width would be the stroke.Begin Path:
This means we start to draw path.Path means road.If we want to make our own custom shape without Rectangular and stroke.We have to tell that we are going to create our own shape or own path.moveTo:
From where we start our own drawing similar to the fillRect x and y position.if we want to start drawing right and bottom of the box.Browser is follish so we have to tell him how much far from the left and how much down from the top.So moveTo take two parameter X position and Y position.
lineTo:
Now we tell the browser from where to start.Its ready to draw but noting did.Because we tell the browser please go to this place but did not tell after going this place what to do.So lineTo gives the command that draw a line to me.We give the X and Y position.Remember one thing that browser is only realize x and y position.structure is lineTo(X position,Y position);
stroke:
Now you tell the browser please go to this place.Browser to go your given position.Again remember,browser is the follish.So you have to tell that please stroke a line from moveTo positon to current position.Draw lines:
Now we draw one line.but if we want to draw another line we can just tell the browser another position.below the current one.So browser will draw a line from the ending position of your first line.If you want to change the MoveTo position form edges of last line you can simply declare moveTo again.like
beginPath();
lineWidth=10;
moveTo(10,10);
lineTo(100,250);
lineTo(50,150);
fill();
line Cap:
It means the decoration of your line edge.Suppose you draw line from 20,20 to 20,150.Three value are butt,round,squareNow you may decorate the edge means (20,150).See the following image and you understand
 |
| Mitter,square,round |
Line Join:
How two line join each other.Thats means where two line meet each other. There are three value of linCap.These are miter(default),square,bevel miter is round.Square is something border radius like in css,bevel are the middle of both.Play these value and see the difference.
Arc:
By arc method we can create circle.Arch have a center point,a radius,starting angle,ending angle,clockwise or anti-closewise position.Center point define by both X and Y position,Radius means how far from the center arch is drawn.Position of arch is define by clockwise or anti-clockwise.Clockwise means like the clock and anti clockwise is opposit.like
mc.beginPath();
mc.arc(50,150,25,0*Math.PI,2.0*Math.PI,'false');
mc.fill();
arc is self drawn so we have to tell the browser that by defining beginPath() method.Then we marked our arch and then tell the browser please fill the marked arch.we may use stroke() method instat of fill() method.
Curves:
Now if you want to create our own curve unlike arc which is square.We can do that by two way quadratic Curve and Bezier Curve.
Quadratic Curve:
it has three parameter.First is where to start,then the control point and last is end point.Structure are:
quadraticCurveTo(start pointX,start pointY,control pointX,Control pointY,Ending pointX,Ending PointY);
BezierCurve:
Is similar but it has two control point rather than one.By this you can draw complex shape.bezierCurveTo(start pointX,start pointY,controlpoint1 X,Controlpoint1 Y,control point2 X,Control point2Y,Ending pointX,Ending PointY);
Differnence between Quadratic Curve and Bezier Curve
Quadratic curve Bezier Curve
In the drawing straight line are drawn to show the control point.First one have only one control point and second one is two.
Curve Project.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Basic</title>
</head>
<body>
<canvas id="mc" width="400" height="400">
here write fallback content is browser does not support canvas then render it.
</canvas>
<script type="text/javascript">
var can=document.getElementById("mc");
var mc=can.getContext('2d');
mc.fillStyle="pink";
mc.beginPath();
mc.arc(200,100,15,0,2*Math.PI);
mc.fill();
mc.fillStyle="rgba(0,255,0,0.4)";
mc.lineWidth=5;
mc.strokeStyle="#009900";
//This is the strike
mc.beginPath();
mc.moveTo(200,100);
mc.bezierCurveTo(250,130,220,180,200,300);
mc.stroke();
//This is the lower leaf
mc.beginPath();
mc.moveTo(200,100);
mc.bezierCurveTo(250,150,150,200,200,100);
mc.stroke();
mc.fill();
//The is the upper leaf
mc.beginPath();
mc.moveTo(200,100);
mc.bezierCurveTo(250,10,150,30,200,100);
mc.stroke();
mc.fill();
//Left leaf
mc.beginPath();
mc.moveTo(200,100);
mc.bezierCurveTo(280,150,290,70,200,100);
mc.stroke();
mc.fill();
//Right leaf
mc.beginPath();
mc.moveTo(200,100);
mc.bezierCurveTo(110,150,110,70,200,100);
mc.stroke();
mc.fill();
//This is root of the tree
mc.strokeStyle="#678"
mc.beginPath();
mc.fillStyle="rgba(0,255,0,0.5)";
mc.moveTo(190,300);
mc.bezierCurveTo(100,400,300,400,210,300);
mc.stroke();
mc.fill();
//THe roots
mc.beginPath();
mc.lineWidth=2;
mc.fillStyle="white";
mc.strokeStyle="rgba(255,012,0,0.5)";
mc.moveTo(200,300);
mc.bezierCurveTo(190,330,180,340,220,360);
mc.stroke();
mc.beginPath();
mc.moveTo(195,340);
mc.bezierCurveTo(210,360,180,365,183,370);
mc.stroke();
</script>
</body>
</html>
 |
| Curves Project |
Comments
0 comments to "Canvas Basic"
Post a Comment