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>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();
</script>
 script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
</script>
 <script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
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 •Resolution dependent

•Support for event handlers •No support for event handlers
•Good text rendering capabilities •Poor text rendering capabilities
•Slow rendering if complex •You can save the resulting image as .png
•Not suited for game applications 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!