Unit 3 - Multimedia Animation

HTMLS - CANVAS:

HTML5 Canvas is a powerful feature that allows developers to dynamically create

and manipulate graphics and animations using JavaScript.

The Rendering Context

The rendering context in Canvas is essentially the interface through which

JavaScript code can interact with the Canvas element to create and manipulate
graphical content. The context provides a set of drawing functions that can be used
to create lines, shapes, text, images, and animations on the Canvas element.

There are two types of rendering contexts in Canvas: 2D and WebGL. The 2D
context is the default context and provides a powerful and flexible API for creating
2D graphics and animations. The WebGL context, on the other hand, allows for the
creation of 3D graphics using the WebGL API.
TS
Browser Support

In terms of browser support, HTML5 Canvas is supported in all modern browsers,

including Chrome, Firefox, Safari, and Edge. However, the level of support for
different features may vary between browsers. To ensure compatibility across
different browsers, it is important to test your code thoroughly and use feature
detection and fallbacks as necessary. Additionally, some older browsers may not
support Canvas at all, so it is important to provide alternative content or functionality
for users on those platforms.

HTML 5 - Canvas Examples

Here are a few examples of what can be done with HTML5 Canvas:

1. Drawing shapes and lines: The HTML5 Canvas element can be used to draw
various shapes and lines on a web page. Here's an example of a red rectangle:

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

<script>
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
context.fillStyle = "red";
context.fillRect(10, 10, 50, 50);
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
</script>

2. Creating animations: The HTML5 Canvas element can also be used to create
animations on a web page. Here's an example of a bouncing ball animation:

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

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

var x = canvas.width / 2;
var y = canvas.height / 2;
var dx = 2;
var dy = -2;
var ballRadius = 10;

function drawBall() {
TS
context.beginPath();
context.arc(x, y, ballRadius, 0, Math.PI * 2);
context.fillStyle = "#0095DD";
context.fill();
context.closePath();
}

function draw() {
context.clearRect(0, 0, canvas.width, canvas.height);
drawBall();

if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {

dx = -dx;
}
if (y + dy > canvas.height - ballRadius || y + dy < ballRadius) {
dy = -dy;
}

x += dx;
y += dy;
}

setInterval(draw, 10);
</script>

Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru

3. Image manipulation: The HTML5 Canvas element can also be used to
manipulate images on a web page. Here's an example of applying a grayscale filter
to an image:

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

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

var image = new Image();

image.src = "myImage.png";
image.onload = function() {
context.drawImage(image, 0, 0);

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);

var data = imageData.data;

for (var i = 0; i < data.length; i += 4) {

TS
var gray = (data[i] + data[i + 1] + data[i + 2]) / 3;
data[i] = gray;
data[i + 1] = gray;
data[i + 2] = gray;
}

context.putImageData(imageData, 0, 0);
};
</script>

These are just a few examples of what can be done with HTML5 Canvas. The
possibilities are endless!

Canvas Drawing Techniques

Canvas is a powerful HTML element that allows you to draw graphics and create
animations using JavaScript. Here are some basic canvas drawing techniques:

1. Drawing Rectangles: To draw a rectangle on the canvas, use the `fillRect()` or

`strokeRect()` methods. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
// draw a filled rectangle
ctx.fillRect(10, 10, 100, 50);

// draw an outlined rectangle

ctx.strokeRect(10, 10, 100, 50);
```

2. Drawing Paths: You can draw complex shapes by defining a path on the canvas.
To create a path, use the `beginPath()` method, and then use `moveTo()`, `lineTo()`,
and `arc()` methods to draw the path. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// create a path
ctx.beginPath();
TS
ctx.moveTo(10, 10);
ctx.lineTo(50, 50);
ctx.lineTo(100, 10);
ctx.closePath();

// fill the path

ctx.fillStyle = 'red';
ctx.fill();

// outline the path

ctx.strokeStyle = 'black';
ctx.stroke();
```

3. Drawing Lines: To draw a straight line on the canvas, use the `moveTo()` and
`lineTo()` methods. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// draw a line
ctx.beginPath();
ctx.moveTo(10, 10);
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
ctx.lineTo(100, 100);
ctx.strokeStyle = 'black';
ctx.stroke();
```

4. Drawing Bezier Curves: Bezier curves are used to create smooth curves on the
canvas. To draw a Bezier curve, use the `bezierCurveTo()` method. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// draw a Bezier curve

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(50, 50, 100, 50, 100, 10);
ctx.strokeStyle = 'black';
ctx.stroke();
TS
```

5. Drawing Quadratic Curves: Quadratic curves are simpler than Bezier curves and
can be used to create smooth curves on the canvas. To draw a quadratic curve, use
the `quadraticCurveTo()` method. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// draw a quadratic curve

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.quadraticCurveTo(50, 50, 100, 10);
ctx.strokeStyle = 'black';
ctx.stroke();
```

6. Using Images: You can use images on the canvas by creating an `Image` object
and then using the `drawImage()` method. For example:

```
// create a canvas element
var canvas = document.getElementById('myCanvas');
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
var ctx = canvas.getContext('2d');

// create an Image object

var img = new Image();
img.src = 'myImage.png';

// draw the image

img.onload = function() {
ctx.drawImage(img, 0, 0);
};

7. Creating Gradients: Gradients can be used to create interesting effects on the

canvas. To create a gradient, use the `createLinearGradient()` or
`createRadialGradient()` method, and then use the `addColorStop()` method to
define the colors of the gradient. For example:

// create a canvas element

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
TS
// create a linear gradient
var gradient = ctx.createLinearGradient(0, 0, 200, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(0.5, 'green');
gradient.addColorStop(1, 'blue');

// use the gradient as the fill style

ctx.fillStyle = gradient;

// draw a rectangle with the gradient fill

ctx.fillRect(10, 10, 200, 100);
```
This creates a linear gradient that goes from red to green to blue horizontally, and
then uses it as the fill style for a rectangle on the canvas. You can also create radial
gradients using `createRadialGradient()`, which creates a gradient that radiates from
a center point.

HTML 5 - Canvas Transformations

HTML5 - Styles and Colors:

In HTML5, styles and colors are used to change the appearance of elements on a
webpage. You can use CSS to define styles for your HTML elements, including font
sizes, font colors, background colors, and more.
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
Canvas - Text and Fonts:

In HTML5 Canvas, you can use the `fillText()` or `strokeText()` methods to draw text
on the canvas. You can also specify the font size, font family, and font style using the
`font` property.

// Set font properties

ctx.font = 'bold 24px Arial';

// Draw text on canvas

ctx.fillText('Hello World!', 50, 50);

Canvas - Pattern and Shadow:

HTML5 Canvas also supports patterns and shadows. You can create a pattern using
an image or another canvas element, and then use that pattern to fill a shape or
draw a stroke. You can also add shadows to shapes using the `shadowBlur`,
`shadowColor`, and `shadowOffset` properties.
TS
Canvas - Save and Restore States:

When working with the HTML5 Canvas, you can save the current state of the canvas
using the `save()` method. This includes things like the current transformation matrix,
fill color, stroke color, and more. You can later restore this state using the `restore()`
method.

Canvas - Translation:

Translation is the process of moving the canvas to a new location. In HTML5

Canvas, you can use the `translate()` method to move the canvas along the x-axis
and y-axis.

Canvas - Rotation:

Rotation is the process of rotating the canvas around a specific point. In HTML5
Canvas, you can use the `rotate()` method to rotate the canvas around the origin, or
you can use the `translate()` method to move the canvas to a new location and then
rotate it.

Canvas - Scaling:

Scaling is the process of changing the size of the canvas. In HTML5 Canvas, you
can use the `scale()` method to scale the canvas along the x-axis and y-axis.
Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru
Canvas - Transforms:

Transforms allow you to combine multiple transformation operations into a single

operation. In HTML5 Canvas, you can use the `transform()` method to apply a matrix
transformation to the canvas.

HTML5 Canvas Composition:

Canvas composition allows you to combine multiple shapes or images into a single
image. In HTML5 Canvas, you can use the `globalCompositeOperation` property to
specify how the shapes or images should be combined.

Canvas - Animations:

HTML5 Canvas also supports animations. You can use the

`requestAnimationFrame()` method to request that the browser call a function to
update the canvas on the next animation frame. This allows you to create smooth,
responsive animations on your webpage.
TS

Tejaswi S, Asst. Prof. Dept. of Computer Science, Seshadripuram Degree College,Mysuru