UNIT 4-HTMLS CANVAS HTMLS5— CANVAS 4.1, HTMLS — CANVAS: The HTMLS invas> element is a powerful feature used for rendering dynamic, scriptable graphics on the web. It provides a drawable region in your HTML page where you can use JavaScript to draw shapes, text, images, charts, and even animations, Unlike traditional image elements, the canvas is blank by default and requires scripts to render content, It supports both 2D and 3D (via WebGL) contexts, making, Supported by all major modern browsers, HTMLS Canvas is widely used in web design, game development, and data visualization 4.2. The Rendering Context ‘The rendering context is an object that provides methods and properties to draw on the element.The rendering context is obtained using the getContext method of the canvas element, and it determines the type of graphics that can be rendered on the canvas. ‘Types of Rendering Text: 1. 2D Rendering Context 2. WebGL Rendering Context 1. 2D Rendering Context : ‘The 2D rendering context gives you the ability to draw 2D graphies—like lines, shapes, text, and images—on the element using JavaScript.The 2D rendering context, accessed by using the string '2d! as the argument to get Context, provides methods for drawing and manipulating 2D graphics. =himi>

Canvas 2D Rendering

2.4 ‘reating Animations on the canvas. Using requestAnimationFrame is ideal for smooth animation loops. Example: Simple Ball Animation 4.5, Canvas - Drawing Rectangles: In HTMLS, the element allows you to draw various shapes, including rectangles. You can manipulate rectangles using several built-in methods, such as fillRect(), sttokeReet(), and clearRect(), These methods allow you to control the rectangle's position, size, and style attributes (e.g., color, border, and transparency), Rectangle Methods : 1, fillReet(x, y, width, height) = Draws a filled re ngle. = x, y: Position of the top-left comer of the rectangle. = width, height: The dimensions of the rectangle. = You can customize the fill color using the fillStyle property. 2. strokeReet(x, y, width, height) = Draws a rectangle outline (stroke) without filling it. = You can customize the stroke color using the strokeStyle property and adjust the line width with lineWidth. 3. clearReet(x, y, width, height) = Clears the specified rectangle area on the canvas, making it transparent. = This is useful for removing content from a specific part of the canvas Ms. Neha , Asst. Pro Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS Ms. Neha , Asst. Prof. Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS 4.6. Canvas - Drawing Paths: In HTMLS, paths are a series of connected lines and curves that can be drawn on the canvas using the CanvasRenderingContext2D methods. These paths can be filled with colors, outlined with borders, or even used to create complex shapes like polygons and curves, Methods for Drawing Paths 1, beginPath(:Starts a new path. This method is required before you start drawing a new shape or path. 2. moveTo(x, y):Moves the starting point of the path to the specified coordinates (x, y) without drawing anythi 3. lineTo(x, y):Draws a straight line from the current position to the specified coordinates (x,y). 4, closePath(): loses the current path by drawing a straight line from the current position back to the starting point of the path. 5. stroke() trokes the path (outlines it) with the current stroke color. 6. fill0:Fills the path with the current fill color. 7. are(x, y, radius, startAngle, endAngle, anticlockwise):Draws an arc or cle by specifying the center (x, y), the radius, the start and end angles, and whether the are should be drawn counterclockwise. var canvas = document.getElementByld("myCanvas"); var etx = canvas.getContext("2d"); Begin a new path ctx.beginPath() Move to starting point (100, 100) ctx.moveTo(100, 100); Ms. Neha , Asst. Pro 10 Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS 77 Draw a line to (200, 100) ctx.lineTo(200, 100); /| Draw a line to (150, 50) ctx lineTo(150, 50); Close the path and connect back to (100, 100) ctx.closePath(); Fill the triangle with color ctx.fillStyle = "lightbiue"; ctx. fill 1 Stroke the path with color La. ctx.strokeStyle = "blue"; etx.stroke(); 4.7. Canvas - Drawing Lines: In HTMLS, you can draw straight lines on a canvas using the CanvasRenderingContext2D methods. To draw lines, you will typically use beginPath(), moveTo(), and lineTo0) methods, along with stroke() to apply a color and style to the line. Methods for Drawing Lines: 1. beginPath(:Starts a new path, which is required to draw any shapes or lines. 2. moveTo(x, y):Moves the starting point of the path to the specified coordinates (x, y) without drawing anything, lineTo(x, y):Draws a straight line from the current position to the specified coordinates (x,y), 4, stroke():Strokes (draws) the current path using the width). 5. lineWidth:Specifies the width of the line. rent stroke style (line color and 6. strokeStyle:Sets the color or style of the stroke (line color). Ms. Neha , Asst. Pro u Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS eee Ms. Neha , Asst. Pro 4 Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS 4.9. Canvas -Drawing Quadratic Curves A quadratic Bézier curve is a type of smooth curve drawn using: + A start point (set using moveTo()) * Accontrol point, which determines the direction and curvature + Amend point, where the curve finishes syntax: context.quadraticCurveTo(ep1x, eply, x, y); Where: eplx, eply: Control point coordinates x, y: End point coordinates (The curve starts from the current point previously set with moveTo)) Ms. Neha , Asst. Prof. Dept. Of Computer Science,P' 7UNIT 4-HTMLS CANVAS 4.11. Canvas - Create Gradients: + Creating gradients on the HTMLS Canvas allows you to fill shapes and regions with smooth color transitions, + The Canvas API provides two types of gradients: linear gradients and radial gradients. + You can use the createLinearGradient and createRadialGradient methods of the 2D rendering context to create gradients, and then use them to fill shapes using the fill method. + Creating gradients on the HTMLS canvas allows you to fill shapes with smooth color transitions. Gradients can be linear (changing color along a line) or radial (changing color in a circular pattern). Let's break down how to create both types of gradients, Types of Gradients: 1, Linear Gradient: Color changes along a straight line (e.g., from left to right, top to bottom), 2. Radial Gradient: Color changes in a circular pattern, starting from a central point and radiating outward, How to Create Gradients on the Canvas: 1. Create a Gradient Object: Use the createLinearGradient() or createRadialGradient() method to create a gradient. 2. Add Color Stops: Use the addColorStop() method to define where colors should appear within the gradient. 3. Apply the Gradient: Set the gradient as the fill or stroke style. Example for Linear Gradient: var canvas = document.getElementByld(‘myCanvas’); var etx = canvas.getContext('2d’); 1! Create a linear gradient (left to right) Ms. Neha , Asst. Pro 18 Dept. Of Computer Science,PIUNIT 4-HTMLS CANVAS var gradient = ctx.createLinearGradient(0, 0, 500, 0); !/ Define color stops gradient.addColorStop(0, 'blue’); // Start color (0%) gradient.addColorStop(1, 'green’); // End color (100%) 11 Set the gradient as the fill style ctx fillStyle = gradient, // Draw a rectangle filled with the gradient ctx.fillRect(50, 50, 400, 300); Explanation: + createLinearGradient(0, 0, 500, 0) creates a gradient that starts at (0, 0) (top-left comer) and ends at (500, 0) (top-right comer) + addColorStop(0, "blue’) sets the color at the start (0%) to blue. + addColorStop(1, ‘green’ sets the color at the end (100%) to green. + The gradient is then used as the fill style to fill a rectangle. Example for Radial Gradients: