UNIT-4: HTML5 Canvas - Detailed Notes
HTML5 Canvas: The Rendering Context
The <canvas> element is used to draw graphics on a web page via scripting (usually JavaScript). It has a 2D rendering
context used for drawing shapes, text, images, and more.
Browser Support
Most modern browsers support HTML5 canvas including Chrome, Firefox, Edge, Safari.
HTML5 Canvas Examples
Example:
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var c = [Link]("myCanvas");
var ctx = [Link]("2d");
[Link] = "#FF0000";
[Link](0,0,150,75);
</script>
Canvas - Drawing Rectangles
- fillRect(x,y,width,height): draws filled rectangle
- strokeRect(x,y,width,height): draws outlined rectangle
- clearRect(x,y,width,height): clears specified rectangle
Canvas - Drawing Paths
Begin path, move, draw lines, and close path.
Example:
[Link]();
[Link](20,20);
[Link](100,20);
[Link](100,100);
[Link]();
[Link]();
Canvas - Drawing Lines
[Link](x,y);
[Link](x,y);
[Link]();
Canvas - Drawing Bezier Curves
[Link](cp1x,cp1y,cp2x,cp2y,x,y);
Canvas - Drawing Quadratic Curves
[Link](cpx,cpy,x,y);
Canvas - Using Images
Example:
var img = [Link]("myImg");
[Link](img,10,10);
Canvas - Create Gradients
Linear Gradient:
var grd = [Link](0,0,200,0);
[Link](0,"red");
[Link](1,"white");
[Link] = grd;
[Link](10,10,150,80);
---
UNIT-5: HTML5 Canvas - Styles, Transforms, Animations
HTML5 - Styles and Colors
[Link] = "red";
[Link] = "blue";
Canvas - Text and Fonts
[Link] = "30px Arial";
[Link]("Hello World",10,50);
[Link]("Hello World",10,100);
Canvas - Pattern and Shadow
Patterns:
var img = [Link]("img");
var pat = [Link](img,"repeat");
[Link] = pat;
[Link](0,0,150,100);
Shadows:
[Link] = "black";
[Link] = 20;
[Link] = 10;
[Link] = 10;
Canvas - Save and Restore States
[Link]();
// changes
[Link]();
Canvas - Translation
[Link](50,50);
Canvas - Rotation
[Link](20 * [Link] / 180);
Canvas - Scaling
[Link](2,2);
Canvas - Transforms
[Link](a,b,c,d,e,f);
[Link](1,0,0,1,0,0);
HTML5 Canvas - Composition
[Link] = "destination-over";
Canvas - Animations
Use requestAnimationFrame for smooth animations.
Example:
function draw(){
[Link](0,0,[Link],[Link]);
[Link](x,0,50,50);
x += 1;
requestAnimationFrame(draw);
}
draw();
---
End of UNIT-4 and UNIT-5 HTML5 Canvas detailed notes.
UNIT-3: HTML5 SVG - Detailed Notes Expanded
What is SVG?
SVG (Scalable Vector Graphics) is an XML-based vector image format for two-dimensional graphics with support for
interactivity and animation. Unlike raster images, SVGs do not lose quality when scaled.
Viewing SVG Files
SVG files can be viewed directly in modern browsers. You can also open them in text editors because they are written in
XML syntax.
Embedding SVG in HTML5
SVG can be embedded using the <svg> tag directly in HTML5 documents, allowing inline styling and scripts for
interactivity.
SVG Circle
The <circle> element draws a circle. Attributes:
- cx: x-axis of the center
- cy: y-axis of the center
- r: radius
Example:
<svg height="100" width="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
SVG Rectangle
The <rect> element draws rectangles. Attributes:
- x, y: top-left corner
- width, height
- rx, ry: rounded corners (optional)
Example:
<svg width="400" height="110">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
SVG Line
Draws straight lines between two points using <line>.
- x1, y1: start point
- x2, y2: end point
Example:
<svg height="210" width="500">
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>
SVG Ellipse
Draws an ellipse (oval shape).
- cx, cy: center
- rx, ry: radius in x and y directions
Example:
<svg height="140" width="500">
<ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
SVG Polygon
Creates closed shapes with multiple points using <polygon>.
- points: list of x,y pairs
Example:
<svg height="210" width="400">
<polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>
SVG Polyline
Similar to polygon but does not close the shape automatically.
Example:
<svg height="200" width="500">
<polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160 160,160" style="fill:white;stroke:red;stroke-width:4"
/>
</svg>
SVG Gradients
Creates smooth colour transitions.
- Linear gradient: changes colour along a straight line
- Radial gradient: changes colour in a circular pattern
Example (Linear Gradient):
<svg height="150" width="400">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>
SVG Star
SVG does not have a direct star tag. It is created using a polygon with carefully calculated points.
Example:
<svg height="210" width="400">
<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
End of UNIT-3 SVG detailed notes.
UNIT-2: Animation and Transitions - Full Detailed Notes
Animation
What is Animation?
Animation is the technique of creating the illusion of motion by rapidly displaying a sequence of static images with slight
differences. In web design, animations enhance user experience by making interfaces interactive, guiding focus, and
adding visual appeal.
Start and End States
An animation has two key points:
- Start State: The initial style or position of the element.
- End State: The final style or position after the animation completes.
Interpolation
Interpolation is the calculation of intermediate values between start and end states to create smooth transitions during
an animation.
Animations in HTML
Using HTML <marquee> for simple scrolling animations is deprecated. Modern animations use CSS and JavaScript.
CSS Animations
Introduction
CSS animations allow elements to change styles smoothly over time without JavaScript.
Creating a Simple Animation
Use the @keyframes rule to define animation steps.
Example:
@keyframes slideRight {
from { transform: translateX(0px); }
to { transform: translateX(100px); }
}
.box {
animation-name: slideRight;
animation-duration: 2s;
}
CSS Animation Property
- animation-name: name of @keyframes
- animation-duration: total time
- animation-timing-function: speed curve (ease, linear, ease-in)
- animation-delay: delay before start
- animation-iteration-count: number of times it repeats
- animation-direction: direction of animation (normal, reverse, alternate)
Keyframes
@keyframes defines the intermediate steps in an animation.
Example:
@keyframes colorChange {
0% { background-color: red; }
50% { background-color: yellow; }
100% { background-color: green; }
}
Declaring Multiple Animations
You can declare multiple animations by separating them with commas.
Example:
div {
animation: slideRight 2s, colorChange 3s;
}
CSS Transitions
All About CSS Transitions
Transitions allow smooth change of property values over a specified duration.
Adding a Transition
div {
transition: background-color 2s;
}
div:hover {
background-color: blue;
}
Looking at Transitions in Detail
- transition-property: property to animate
- transition-duration: time taken
- transition-timing-function: speed curve
- transition-delay: delay before starting
The Longhand Properties
Can be written separately as:
transition-property: background-color;
transition-duration: 2s;
transition-timing-function: ease-in;
transition-delay: 1s;
Longhand vs Shorthand Properties
Shorthand combines all into one line:
transition: background-color 2s ease-in 1s;
Working with Multiple Transitions
Multiple transitions can be declared separated by commas.
div {
transition: width 2s, height 2s, background-color 2s;
}
End of Unit-2 Animation and Transitions detailed notes.
UNIT-1: Web Design, CSS, and JavaScript - Full Detailed Notes with Examples
Web Design
Origins and Evolution of HTML
HTML was invented by Tim Berners-Lee in 1991 to define the structure of web pages.
- HTML 1.0 (1993): Basic text, links, images.
- HTML 2.0 (1995): Forms, tables.
- HTML 3.2 (1997): Scripts, applets.
- HTML 4.01 (1999): Better structure, separating style and content.
- XHTML (2000): XML-based strict version.
- HTML5 (2014 onwards): Multimedia, semantic tags, APIs.
Basic Syntax
Uses tags enclosed in < >.
Example:
<html>
<head>
<title>Sample</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
Basic Text Markup
- Headings: <h1> to <h6>
- Paragraph: <p>
- Bold: <b> or <strong>
- Italic: <i> or <em>
- Line Break: <br>
- Horizontal Rule: <hr>
Example:
<p>This is <b>bold</b> and <i>italic</i> text.</p>
Images
Display images using <img> tag.
Example:
<img src="[Link]" alt="Flower" width="200" height="150">
Lists
Ordered List:
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
Unordered List:
<ul>
<li>Apple</li>
<li>Mango</li>
</ul>
Definition List:
<dl>
<dt>HTML</dt>
<dd>Markup language for webpages</dd>
</dl>
Tables
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Amit</td>
<td>20</td>
</tr>
</table>
Forms
<form action="[Link]" method="post">
Name: <input type="text" name="name"><br>
<input type="submit" value="Submit">
</form>
Frame
<frameset cols="50%,50%">
<frame src="[Link]">
<frame src="[Link]">
</frameset>
Overview and Features of HTML5
- Semantic tags: <header>, <footer>, <section>
- Multimedia: <audio>, <video>
- Graphics: <canvas>, <svg>
- APIs: Geolocation, Local storage
CSS (Cascading Style Sheets)
Introduction
CSS styles HTML elements for colour, fonts, layout, and design. It separates content (HTML) from presentation (CSS).
Levels of Style Sheets
1. Inline CSS:
<p style="color:red;">Hello</p>
2. Internal CSS:
<style>
p { color: blue; }
</style>
3. External CSS:
<link rel="stylesheet" href="[Link]">
Style Specification Formats
Syntax: selector { property: value; }
Example:
h1 {
color: green;
font-size: 24px;
}
Selector Forms
- Element selector: p { }
- Class selector: .className { }
- ID selector: #idName { }
- Group selector: h1, h2 { }
- Universal selector: * { }
Property Value Forms
- color: red;
- font-size: 14px;
- background-color: yellow;
Font Properties
font-family, font-size, font-style, font-weight
List Properties
list-style-type: disc;
list-style-type: circle;
list-style-type: square;
Color
- Name: color: red;
- Hex: #FF0000
- RGB: rgb(255,0,0)
Alignment of Text
- text-align: left;
- text-align: center;
- text-align: right;
<span> and <div> Tags
<span>: Inline container to style parts of text.
Example:
<p>This is <span style="color:blue;">blue</span> text.</p>
<div>: Block container to group elements.
Example:
<div style="background-color:lightgrey;">
<h2>Title</h2>
<p>Paragraph inside div.</p>
</div>
Overview and Features of CSS3
- Rounded corners: border-radius
- Shadows: box-shadow, text-shadow
- Gradients: linear and radial gradients
- Transitions and Animations
- Flexbox and Grid layout
JavaScript
Object Orientation and JavaScript
JavaScript supports object-based programming using prototypes.
Example:
let student = {
name: "John",
age: 22,
course: "CS"
};
General Syntactic Characteristics
- Case-sensitive.
- Statements end with ;.
- Uses variables, loops, conditions, functions.
Primitives, Operations, and Expressions
Primitives: Number, String, Boolean, Null, Undefined
Operations:
- Arithmetic: + - * / %
- Comparison: == === != !== > < >= <=
- Logical: && || !
Screen Output
[Link]("Hello World");
alert("Welcome!");
[Link]("Debug");
Keyboard Input
Using prompt():
let name = prompt("Enter your name:");
alert("Welcome " + name);
End of Unit-1 Notes.