HTML Graphics

In this tutorial, I am going to showing you how you can code in canvas and svg graphics inside your HTML web page.

Canvas

HTML canvas element is an element that is used to draw graphics inside web page via JavaScript.

• <canvas> - used to define a canvas.
• It has a default width of 300px and height of 150px, with no border and content
• Can take in style and other global attributes.

Canvas simply creates the space with which you can code in your graphics using JavaScript. Now let's draw a line, square and circle.

SVG (Scalable Vector Graphics)

HTML SVGs are used to define a vector base graphic for the web page.

• <svg> - element used for the container of vector graphic.
• It has other element which are used inside the svg container for drawing path, rectangles, circle, polygons and many more.

SVG RECTANGLE

• <svg> - element used for the container of vector graphic.
• <rect> - used to define the rectangle graphic.
• In the example below, attributes x and y of <rect> element defines the co-ordinates of the top-left corner of the rectangle; while the width and height specify the width and height of the shape.

SVG CIRCLE

• <svg> - element used for the container of vector graphic.
• <circle> - used to define the circle graphic.
• In the example below, attributes cy and cy of <circle> element defines the co-ordinates of the center of the circle; while the r specifies radius

SVG LINE

• <svg> - element used for the container of vector graphic.
• <line> - used to define the line graphic.
• In the example below, attributes x1, x2, y1, y2 of <line> element defines the drawing of the line from x-axis (x1, x2) and y-axis (y1, y2)

SVG Polygon (Star)

• <svg> - element used for the container of vector graphic.
• <polygon> - used to define the polygon graphic.
• In the example below, attribute points of <polygon> element defines a list of points whereby each points represents a vertex of the shape to be drawn.

SVG TEXT

• <svg> - element used for the container of vector graphic.
• <text> - used to define the text graphic.
• In the example below, attributes x and y of the element defines the location of the top-left corner in absolute terms while the dx and dy specifies the relative location.