Scribd
Upload
25 views19 pages

Unit IV

1) The <canvas> element in HTML5 allows for drawing graphics on a web page using JavaScript. It can be used to draw graphs, animations, and more. 2) The <canvas> element itself is only a container - scripting is required to actually draw on the canvas. JavaScript methods allow drawing paths, boxes, circles, text, and images. 3) Canvas drawings can be animated and interactive. Canvas responds to events and can power HTML games. Browser support varies but latest versions of major browsers support canvas.

Uploaded by

Sukanya Nagare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
25 views19 pages

Unit IV

1) The <canvas> element in HTML5 allows for drawing graphics on a web page using JavaScript. It can be used to draw graphs, animations, and more. 2) The <canvas> element itself is only a container - scripting is required to actually draw on the canvas. JavaScript methods allow drawing paths, boxes, circles, text, and images. 3) Canvas drawings can be animated and interactive. Canvas responds to events and can power HTML games. Browser support varies but latest versions of major browsers support canvas.

Uploaded by

Sukanya Nagare
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 19

Unit-IV Canvas

HTML5 element <canvas> gives you an easy and powerful way to draw
graphics using JavaScript. It can be used to draw graphs, make photo
compositions or do simple (and not so simple) animations.
The HTML <canvas> element is used to draw graphics, on the fly, via scripting
(usually JavaScript).

The <canvas> element is only a container for graphics. You must use a script to
actually draw the graphics.

Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.

Canvas can draw colorful text, with or without animation.

Canvas has great features for graphical data presentation with an imagery of
graphs and charts.

HTML Canvas Can be Animated


Canvas objects can move. Everything is possible: from simple bouncing balls to
complex animations.

HTML Canvas Can be Interactive


Canvas can respond to JavaScript events.

Canvas can respond to any user action (key clicks, mouse clicks, button clicks,
finger movement).
HTML Canvas Can be Used in Games
Canvas' methods for animations, offer a lot of possibilities for HTML gaming
applications.

<canvas id="myCanvas" width="200" height="100"></canvas>

The <canvas> element must have an id attribute so it can be referred to by


JavaScript.

The width and height attribute is necessary to define the size of the canvas.

Tip: You can have multiple <canvas> elements on one HTML page.

By default, the <canvas> element has no border and no content.

Let us see a simple example on using <canvas> element in HTML5


document.
<!DOCTYPE HTML>

<html>

<head>

<style>

#mycanvas{border:1px solid red;}

</style>

</head>

<body>

<canvas id = "mycanvas" width = "100" height = "100"></canvas>

</body>

</html>
The Rendering Context
The <canvas> is initially blank, and to display something, a script first
needs to access the rendering context and draw on it.
The canvas element has a DOM method called getContext, used to
obtain the rendering context and its drawing functions. This function
takes one parameter, the type of context2d.
Following is the code to get required context along with a check if your
browser supports <canvas> element −
var canvas = document.getElementById("mycanvas");

if (canvas.getContext) {
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}

Browser Support
The latest versions of Firefox, Safari, Chrome and Opera all support for
HTML5 Canvas but IE8 does not support canvas natively.
You can use ExplorerCanvas to have canvas support through Internet
Explorer. You just need to include this JavaScript as follows −
<!--[if IE]><script src = "excanvas.js"></script><![endif]-->
HTML5 Canvas - Drawing Rectangles
There are three methods that draw rectangles on the canvas −
Sr.No. Method and Description

fillRect(x,y,width,height)
1
This method draws a filled rectangle.

strokeRect(x,y,width,height)
2
This method draws a rectangular outline.

clearRect(x,y,width,height)
3 This method clears the specified area and makes it fully
transparent
<!DOCTYPE html>

<html>

<body>

<h1>HTML5 Canvas</h1>

<h2>The rect() Method</h2>

<canvas id="myCanvas" width="300" height="150" style="border:1px solid


grey"></canvas>

<script>

const canvas = document.getElementById("myCanvas");

const ctx = canvas.getContext("2d");

ctx.beginPath();

ctx.rect(20, 20, 150, 100);

ctx.stroke();

</script>

</body>
</html>

The rect() Method


The rect() method adds a rectangle to the path.

The syntax is context.rect(x, y, width, height)

Param Description

X The x-coordinate of the upper-left corner of the rectangle

Y The y-coordinate of the upper-left corner of the rectangle

width The width of the rectangle, in pixels

height The height of the rectangle, in pixels

HTML5 Canvas - Drawing Paths


We require the following methods to draw paths on the canvas −
S.No. Method and Description

beginPath()
1
This method resets the current path.

2
moveTo(x, y)
This method creates a new subpath with the given point.

closePath()
3 This method marks the current subpath as closed, and starts a new
subpath with a point the same as the start and end of the newly
closed subpath.

fill()
4
This method fills the subpaths with the current fill style.

stroke()
5
This method strokes the subpaths with the current stroke style.

arc(x, y, radius, startAngle, endAngle, anticlockwise)


Adds points to the subpath such that the arc described by the
6 circumference of the circle described by the arguments, starting at
the given start angle and ending at the given end angle, going in
the given direction, is added to the path, connected to the previous
point by a straight line.

<!DOCTYPE HTML>

<html>

<head>

<style>

#test {

width: 100px;
height:100px;

margin: 0px auto;

</style>

<script type = "text/javascript">

function drawShape() {

// get the canvas element using the DOM

var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported

if (canvas.getContext) {

// use getContext to use the canvas for drawing

var ctx = canvas.getContext('2d');

// Draw shapes

ctx.beginPath();

ctx.arc(75,75,50,0,Math.PI*2,true); // Outer circle

ctx.moveTo(110,75);

ctx.arc(75,75,35,0,Math.PI,false); // Mouth

ctx.moveTo(65,65);

ctx.arc(60,65,5,0,Math.PI*2,true); // Left eye

ctx.moveTo(95,65);

ctx.arc(90,65,5,0,Math.PI*2,true); // Right eye

ctx.stroke();

} else {
alert('You need Safari or Firefox 1.5+ to see this demo.');

</script>

</head>

<body id = "test" onload = "drawShape();">

<canvas id = "mycanvas"></canvas>

</body>

</html>

HTML5 Canvas - Drawing Lines

Line Methods
We require the following methods to draw lines on the canvas –

The Methods
The beginPath() method starts a new path. It does not draw anything, it just d
efines a new path.
The moveTo() defines the starting point of the line. It does not draw anything, it
just sets a start point.

The lineTo() method defines the end point of the line. It does not draw
anything, just sets an end point.

The stroke() method draws to line. The default stroke color is black.

closePath()

This method marks the current subpath as closed, and starts a new
subpath with a point the same as the start and end of the newly closed
subpath.

fill()

This method fills the subpaths with the current fill style

<!DOCTYPE html>
<html>
<body>
<h1>HTML5 Canvas</h1>
<h2>The lineWidth Propery</h2>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid


grey;"></canvas>

<script>
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(200,100);
ctx.lineWidth = 10;
ctx.stroke();
</script>
</body>
</html>
Line Properties
There are several properties which allow us to style lines.
S.No. Property and Description

lineWidth [ = value ]
1 This property returns the current line width and can be set, to
change the line width.

lineCap [ = value ]
2 This property returns the current line cap style and can be set, to
change the line cap style. The possible line cap styles are butt,
round, and square

lineJoin [ = value ]
3 This property returns the current line join style and can be set, to
change the line join style. The possible line join styles are bevel,
round, and miter.

miterLimit [ = value ]
4 This property returns the current miter limit ratio and can be set,
to change the miter limit ratio.

<!DOCTYPE HTML>

<html>

<head>
<style>

#test {

width: 100px;

height:100px;

margin: 0px auto;

</style>

<script type = "text/javascript">

function drawShape() {

// get the canvas element using the DOM

var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported

if (canvas.getContext) {

// use getContext to use the canvas for drawing

var ctx = canvas.getContext('2d');

for (i=0;i<10;i++){

ctx.lineWidth = 1+i;

ctx.beginPath();

ctx.moveTo(5+i*14,5);

ctx.lineTo(5+i*14,140);

ctx.stroke();
}

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

</script>

</head>

<body id = "test" onload = "drawShape();">

<canvas id = "mycanvas"></canvas>

</body>

</html>

HTML5 Canvas - Drawing Bezier Curves


We need the following methods to draw Bezier curves on the canvas −
S.No. Method and Description

beginPath()
1
This method resets the current path.

moveTo(x, y)
2
This method creates a new subpath with the given point.

3
closePath()
This method marks the current subpath as closed, and starts a new
subpath with a point the same as the start and end of the newly
closed subpath.

fill()
4
This method fills the subpaths with the current fill style.

stroke()
5
This method strokes the subpaths with the current stroke style.

bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)


6 This method adds the given point to the current path, connected to
the previous one by a cubic Bezier curve with the given control
points.

The x and y parameters in bezierCurveTo() method are the coordinates


of the end point. cp1x and cp1y are the coordinates of the first control
point, and cp2x and cp2y are the coordinates of the second control point.
Example
Following is a simple example which makes use of above mentioned
methods to draw a Bezier curves.
<!DOCTYPE HTML>

<html>

<head>

<style>

#test {
width: 100px;

height:100px;

margin: 0px auto;

</style>

<script type = "text/javascript">

function drawShape() {

// get the canvas element using the DOM

var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported

if (canvas.getContext) {

// use getContext to use the canvas for drawing

var ctx = canvas.getContext('2d');

ctx.beginPath();

ctx.moveTo(75,40);

ctx.bezierCurveTo(75,37,70,25,50,25);

ctx.bezierCurveTo(20,25,20,62.5,20,62.5);

ctx.bezierCurveTo(20,80,40,102,75,120);
ctx.bezierCurveTo(110,102,130,80,130,62.5);

ctx.bezierCurveTo(130,62.5,130,25,100,25);

ctx.bezierCurveTo(85,25,75,37,75,40);

ctx.fill();

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

</script>

</head>

<body id = "test" onload = "drawShape();">

<canvas id = "mycanvas"></canvas>

</body>

</html>

HTML5 Canvas - Drawing Quadratic Curves


We require the following methods to draw quadratic curves on the
canvas −
S.No. Method and Description

beginPath()
1
This method resets the current path.

2
moveTo(x, y)
This method creates a new subpath with the given point.

closePath()
3 This method marks the current subpath as closed, and starts a new
subpath with a point the same as the start and end of the newly
closed subpath.

fill()
4
This method fills the subpaths with the current fill style.

stroke()
5
This method strokes the subpaths with the current stroke style.

quadraticCurveTo(cpx, cpy, x, y)
6 This method adds the given point to the current path, connected to
the previous one by a quadratic Bezier curve with the given
control point.

The x and y parameters in quadraticCurveTo() method are the


coordinates of the end point. cpx and cpy are the coordinates of the
control point.
Example
Following is a simple example which makes use of above mentioned
methods to draw a Quadratic curves.
<!DOCTYPE HTML>

<html>

<head>
<style>

#test {

width: 100px;

height:100px;

margin: 0px auto;

</style>

<script type = "text/javascript">

function drawShape() {

// get the canvas element using the DOM

var canvas = document.getElementById('mycanvas');

// Make sure we don't execute when canvas isn't supported

if (canvas.getContext) {

// use getContext to use the canvas for drawing

var ctx = canvas.getContext('2d');

// Draw shapes

ctx.beginPath();

ctx.moveTo(75,25);

ctx.quadraticCurveTo(25,25,25,62.5);

ctx.quadraticCurveTo(25,100,50,100);

ctx.quadraticCurveTo(50,120,30,125);

ctx.quadraticCurveTo(60,120,65,100);
ctx.quadraticCurveTo(125,100,125,62.5);

ctx.quadraticCurveTo(125,25,75,25);

ctx.stroke();

} else {

alert('You need Safari or Firefox 1.5+ to see this demo.');

</script>

</head>

<body id = "test" onload = "drawShape();">

<canvas id = "mycanvas"></canvas>

</body>

</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy