introduction of HTML canvas and styles .pptx

HTML Canvas Graphics
The HTML <canvas> element is used to draw graphics on a web page.
The graphic to the left is created with <canvas>. It shows four elements: a red
rectangle, a gradient rectangle, a multicolor rectangle, and a multicolor text.

Canvas Tag in HTML
Introduction
 The HTML canvas element provides HTML a bitmapped surface to work with. It is used to
draw graphics on the web page.
 The HTML 5 <canvas> tag is used to draw graphics using scripting language like JavaScript.
 The <canvas> element is only a container for graphics, you must need a scripting language to
draw the graphics. The <canvas> element allows for dynamic and scriptable rendering of 2D
shapes and bitmap images.

 It is a low level, procedural model that updates a bitmap and does not have a
built-in scene. There are several methods in canvas to draw paths, boxes,
circles, text and add images.
 In HTML, the <canvas> tag is used to dynamically draw shapes, pictures, and
other visuals on a web page. It gives you a drawing surface using JavaScript so
you can work with and create graphics in real-time. The <canvas> element is
a container for visuals that you can create using JavaScript; it doesn't render
anything by itself.

 Canvas Coordinates:
The canvas uses a coordinate system where the top-left corner is the origin (0,0).
The x-axis increases from left to right, and the y-axis increases from top to
bottom.
 Rendering Context:
The getContext method is used to obtain a rendering context, and in the
example above, we used the "2d" context (getContext("2d")). The "2d" context is
the most common and is used for 2D graphics.
 Drawing Methods:
The Canvas API provides various methods for drawing shapes, paths, text, and
images. Common drawing methods include fillRect() for rectangles, arc() for
arcs/circles, fillText() for text, and more.
Styling and Colors:
Styles and colors can be set using properties like fillStyle and strokeStyle. The
fillStyle property determines the fill color, and strokeStyle determines the color
of the shapes' outlines.

Paths:
Paths are used to draw complex shapes. Methods like beginPath(), moveTo(),
lineTo(), arc(), and closePath() help define paths. Paths are useful for creating
custom shapes and outlines.
Animation:
The <canvas> element can be used for simple animations by repeatedly
redrawing the canvas at different intervals. The requestAnimationFrame()
function is often used for smoother animations.
Image Drawing:
Images can be drawn on the canvas using the drawImage () method. This is useful
for displaying static images or creating games and interactive applications.

What is HTML Canvas?
 The HTML <canvas> element is used to draw graphics, on the fly, via JavaScript.
 The <canvas> element is only a container for graphics. You must use JavaScript to
actually draw the graphics.
 Canvas has several methods for drawing paths, boxes, circles, text, and adding
images.
 Canvas is supported by all major browsers.
A canvas is a rectangular area on an HTML page. By default, a canvas has no border
and no content.
The markup looks like this:
<canvas id="myCanvas" width="200" height="100"></canvas>
Note: Always specify an id attribute (to be referred to in a script), and
a width and height attribute to define the size of the canvas. To add a border, use
the style attribute.

Canvas Example:
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
</script>

 <script>
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>

 script>
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>

 <script>
ctx.font = "30px Arial";
ctx.strokeText("Hello World", 10, 50);
</script>

HTML Canvas:
HTML Canvas - Draw Image
The drawImage() method draws an image onto the canvas.
The drawImage() method can be used with three different syntaxes:
•drawImage(image, dx, dy)
•drawImage(image, dx, dy, dwidth, dheight)
•drawImage(image, sx, sy, swidth, sheight, dx, dy, dwidth,
dheight)

SVG(Scalable Vector Graphics)
 SVG (Scalable Vector Graphics)
 SVG defines vector-based graphics in XML, which can be directly embedded in
HTML pages.
 SVG graphics are scalable, and do not lose any quality if they are zoomed or
resized:

What is SVG?
 SVG stands for Scalable Vector Graphics
 SVG is used to define vector-based graphics for the Web
 SVG defines graphics in XML format
 Each element and attribute in SVG files can be animated
 SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript
The <svg> Element:
The HTML <svg> element is a container for SVG graphics.
SVG has several methods for drawing paths, rectangles, circles,
polygons, text, and much more.

Comparison of SVG and Canvas
SVG Canvas
•Resolution independent
•Support for event handlers
•Good text rendering capabilities
•Slow rendering if complex
•Not suited for game applications
•Resolution dependent
•No support for event handlers
•Poor text rendering capabilities
•You can save the resulting image as .png or .jpg
•Well suited for graphic-intensive games

Differences Between SVG and Canvas
 SVG is a language for describing 2D graphics in XML, while Canvas draws 2D
graphics, on the fly (with JavaScript).
 SVG is XML based, which means that every element is available within the SVG
DOM. You can attach JavaScript event handlers to SVG graphics.
 In SVG, each drawn shape is remembered as an object. If attributes of an SVG
object are changed, the browser can automatically re-render the shape.
 Canvas is rendered pixel by pixel. In canvas, once the graphic is drawn, it is
forgotten by the browser. If its position should be changed, the entire scene needs
to be redrawn, including any objects that might have been covered by the graphic.

drawImage(image, sx, sy, swidth,
sheight, dx, dy, dwidth, dheight)
The drawImage(image, sx, sy, swidth, sheight, dx, dy,
dwidth, dheight) syntax is used to clip the source image,
before it is placed on the canvas.

Parameter Description
image Required. The image to draw into the context
sx Optional. The x-coordinate of the top-left corner of the
source image (for clipping the source image)
sy Optional. The y-coordinate of the top-left corner of the source
image (for clipping the source image)
swidth Optional. The width of the clipping of the source image, in
pixels
sheight Optional. The height of the clipping of the source image, in
pixels
dx The x-coordinate in the canvas where to place the top-left
corner of the source image
dy The y-coordinate in the canvas where to place the top-left
corner of the source image
dwidth Optional. The width to draw the image in the destination
canvas. This allows scaling of the image
dheight Optional. The height to draw the image in the destination
canvas. This allows scaling of the image

About the RGraph software:
RGraph is a javascript charts and graphs library for websites. It was first created in late 2008 and
aims to be the best Open Source charting library you can get your hands on.
With the number of different types of charts having grown to 50-60, using
both html5 canvas and svg, RGraph has a wide appeal and can represent many types of data
quickly and efficiently.

RGraph is suitable for all websites with charts being rendered
using javascript, svg and canvas.
The size of the javascript files and the code to make a chart is small and can
be further reduced with minification and compression.
Therefore, it offers significant speed boosts to websites.
With Google putting an ever-increasing emphasis on page speed and
responsiveness, using a javascript charts library can offer tangible benefits
for your website and your bottom line!

introduction of HTML canvas and styles .pptx

More Related Content

Similar to introduction of HTML canvas and styles .pptx

More from hannahroseline2

Recently uploaded

introduction of HTML canvas and styles .pptx