It is
used for creating graphics on the fly. It can be used for rendering graphs,
game graphics and other visual images. <canvas>
requires JavaScript getElementById method
to design graphics. It has several methods and the following list of features –
§ Graphs and Charts
§ Animations
§ Games
§ Diagrams
§ Videos and Photo galleries.
§ Special image effects.
§ Drawing applications.
§ User interface enhancement.
It is a paired tag. Syntax -
<canvas></canvas>
Note – Always specify an id attribute and a width
and height attribute to define the size of the canvas. Any text inside the
<canvas> element will be displayed in browser that does not support
<canvas>
Attribute
|
Value
|
Description
|
Height
|
pixels
|
Specifies the height of the canvas.
|
Width
|
pixels
|
Specifies the width of the canvas.
|
Id
|
ID_Name
|
Declared unique id for the element.
|
Class
|
predefined_class
|
Used in cascading style sheet.
|
style
|
Style_attribute
|
CSS code specifies inline the HTML tag is
presented.
|
onfocus
|
“java_script”
|
Element gets focus on object when script to
be run.
|
Onblur
|
“java_script”
|
Element loose the focus on object, when
script to be run.
|
onabort
|
“java_script”
|
Element gets aborted on object, when script
to be run.
|
How to
create a canvas ?
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<canvas width="200px" height="100px" style="border:2px solid black" id="Mycanv">
<p style='color:red'>OOPs your browser does not support canvas</p>
</canvas>
<script type="text/javascript">
var
can = document.getElementById("Mycanv");
var
canx = can.getContext('2d');
canx.fillStyle="#FFFF00";
canx.fillRect(25,10,150,80);
</script>
</body>
</html>
Canvas
with Multiple Rectangles
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<canvas id="Mycanv"></canvas>
<script type="text/javascript">
var
canvas=document.getElementById('Mycanv');
var
canvasx=canvas.getContext('2d');
canvasx.fillStyle='#FFCC00';
canvasx.fillRect(0,5,80,110);
canvasx.fillStyle='#FF9900';
canvasx.fillRect(25,0,120,50);
canvasx.fillStyle='#FF00CC';
canvasx.fillRect(100,35,160,60);
</script>
</body>
</html>
CANVAS
PATHS
We can design different paths on a canvas
with the help of the following methods –
§ The beginPath()
defines a new drawing path.
§ The moveTo()
method creates a new subpath for the given point.
§ The lineTo()
method draws a line from the context point to the given point.
§ The stroke()
method assigns a color to the line and make it visible. Unless otherwise
specified the default stroke color is black.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<canvas width="200px" height="100px" style="border:'2px solid #FF00FF'" id="Mycanv">
</canvas>
<script type="text/javascript">
var
c=document.getElementById('Mycanv');
var
ctx=c.getContext('2d');
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.moveTo(0,100);
ctx.stroke();
</script>
</body>
</html>
CANVAS
CIRCLES
We can design circle on a canvas with the
help of the following syntax –
arc(x,y,r,start,stop).
Here x
represents width, y represents
height, r represents radius, start represents starting position and stop represents ending position.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<canvas style="red" width="200px"
height="200px" id="Mycanv">
</canvas>
<script type="text/javascript">
var
c = document.getElementById('Mycanv');
var
ctx = c.getContext('2d');
ctx.beginPath();
ctx.arc(95,80,50,0,2*Math.PI);
ctx.stroke();
</script>
</body>
</html>
CANVAS
TEXT
To draw text on a canvas the following
properties and methods frequently we are using –
§ font – Defines the font properties for text.
§ fillText(text,
x,y) – Draws filled text on the canvas.
§ strokeText(text,
x, y) – Draws text on the canvas.
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas
Element</title>
</head>
<body>
<canvas id="Mycanv" width="200px"
height="100px" style="border:2px solid #FF0000">
</canvas>
<script type="text/javascript">
var
c = document.getElementById('Mycanv');
var
ctx = c.getContext('2d');
ctx.font =
"30px tahoma";
ctx.fillText("CMP",20,55);
</script>
</body>
</html>
CANVAS
GRADIENTS
Gradients can be used to fill rectangles,
circles, lines, and text etc. Shapes on the canvas are not limited to solid
colors. There are two different types of gradients.
§ Linear
Gradient – It is used to
create linear color shades from left to right. Syntax – createLinearGradient(x,y,x1,y1).
x,y represents starting width and
height. x1,y1 represents ending
width and height.
addColorStop() method – It specifies the color stops and its position
along the gradient.Gradient positions can be anywhere between 0 to 1. To use
the gradient, set the fillStyle or strokeStyle property to the gradient.
§ Radial Gradient – These gradients
are popularly known as circular gradients. Syntax – createRadialGradient(x,y,r,x1,y1,r1)
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="UTF-8"/>
<title>Canvas Element</title>
</head>
<body>
<canvas id="Mycanv">
</canvas>
<script type="text/javascript">
var c = document.getElementById('Mycanv');
var ctx = c.getContext('2d');
var grad =
ctx.createRadialGradient(110,50,5,90,60,100);
grad.addColorStop(0,"white");
grad.addColorStop(1,"blue");
ctx.fillStyle = grad;
ctx.fillRect(10,10,200,80);
</script>
</body>
</html>
No comments:
Post a Comment