Author: misamaliraza94
-
SVG Polygon
Description of the <polygon> element The SVG <polygon> element creates a graphic containing at least three sides. Polygons consist of straight lines, which are connected up, and its shape is “closed”. Example of the SVG <polygon> element with three sides: In this example the points attribute specifies the x and y coordinates for each corner of our…
-
SVG Line
Description of the <line> element The SVG <line> element creates lines. Since the <line> elements are geometrically one-dimensional single lines, they do not have any interior. Therefore, they are never filled. Example of the SVG <line> element: Let’s explain the code above: The x1 attribute specifies the beginning of the line on the x-axis. The y1 attribute specifies the…
-
SVG Ellipse
Description of the <ellipse> element The SVG <ellipse> element creates ellipses. The ellipse is centered by using the cx and cy attributes. However, unlike the <circle> element, the radius in the x and y coordinates is specified by two attributes, not one. An ellipse and a circle are similar. The difference between them is that an ellipse has an x and…
-
SVG Circle
Description of the <circle> element The SVG <circle> element creates circles, based on a center point and a radius. The coordinates of the circle’s center are specified by the cx and cy attributes. And the radius of the circle is specified by the r attribute. Example of the SVG <circle> element: Let’s explain the code above: The cx and cy attributes specify the x and…
-
SVG Rectangle
Description of the <rect> element The SVG <rect> element creates a rectangle, as well as rectangle shape variations. It is possible to draw rectangles of various height, width, with different stroke and fill colors, etc. We are going to try some examples. Example of the SVG <rect> element: Now let’s explain this code: The width and height attributes specify…
-
SVG in HTML5
In HTML5, the SVG elements can be embedded directly into your HTML page. If the SVG is written in XML, all elements should be appropriately closed! Shape elements in SVG SVG has some predetermined shape elements. Here they are: rectangle <rect> circle <circle> ellipse <ellipse> line <line> polyline <polyline> polygon <polygon> path <path> Example of…
-
SVG Intro
SVG (Scalable Vector Graphics) specifies vector-based graphics in XML format. In order to work with it, you need to have some basic understanding of HTML and basic XML. SVG is used to specify vector-based graphics for the Web. Each element and attribute in SVG files can be animated. SVG is a W3C recommendation. It incorporates…
-
Canvas Reference
The HTML5 <canvas> element is used for drawing graphics via scripting (commonly JavaScript). But the <canvas> element does not have drawing opportunities on its own. To draw the graphics, you must use a script because the <canvas> element is only a container for graphics. The getContext() method returns an object which presents properties and methods for drawing on…
-
Canvas Images
One of the features of the <canvas> element is the possibility of using images. These can be used for different purposes. You can use external images in any format supported by the browser (e.g., PNG, GIF, or JPEG). As a source, you can also use the image created by other canvas elements. Importing images into…
-
Canvas Text
HTML5 canvas allows creating text using different font and text properties presented below: Properties and Methods Property Description font It returns the current font settings and can be set to change the font. textAlign It returns the current text alignment settings and can be set to change the alignment. The property has the following values:…