SVG Stroke Properties SVG offers a wide range of stroke properties. In this chapter we will look at the following: stroke stroke-width stroke-linecap stroke-dasharray All the stroke properties can be applied to any kind of lines, text and outlines of elements like a circle.   SVG stroke Property The stroke property defines the color of…


SVG Text – <text> The <text> element is used to define a text. Here the SVG code : Output :  Example 2 Rotate the text. Here the SVG code : Output : Example 3 Text as a link (with the <a> element). Here the SVG code : Output : I love SVG!  


SVG Path – <path> The <path> element is used to define a path. The following commands are available for path data: M = moveto L = lineto H = horizontal lineto V = vertical lineto C = curveto S = smooth curveto Q = quadratic Bézier curve T = smooth quadratic Bézier curveto A =…


SVG Polyline – <polyline> Example 1 The <polyline> element is used to create any shape that consists of only straight lines. Here the SVG code : Output : Example 2 Another example with only straight lines. Here the SVG code : Output :


SVG Polygon – <polygon> The <polygon> element is used to create a graphic that contains at least three sides. Polygons are made of straight lines, and the shape is “closed” (all the lines connect up). Example 1 The following example creates a polygon with three sides.Here is the SVG code: Output : Code explanation: The…


Colors, Styles, and Shadows Property Description fillStyle Sets or returns the color, gradient, or pattern used to fill the drawing strokeStyle Sets or returns the color, gradient, or pattern used for strokes shadowColor Sets or returns the color to use for shadows shadowBlur Sets or returns the blur level for shadows shadowOffsetX Sets or returns…


Canvas – Images To draw an image on a canvas, use the following method: drawImage(image,x,y) Source code: <!DOCTYPE html> <html> <body> <p><b>Image to show on canvas:</b></p> <img id=”scream” width=”220″ height=”180″ src=”pic_the_scream.jpg” alt=”The Scream”> <p><b>Selected Image on Canvas:</b></p> <canvas id=”myCanvas” width=”240″ height=”180″ style=”border:1px solid #d3d3d3;”> Your browser does not support the HTML5 canvas tag. </canvas> <script>…


To draw text on a canvas, the most important property and methods are: font – it defines font properties of the text fillText(text,x,y) – it draws “filled” text on the canvas strokeText(text,x,y) – it draws text on the canvas (without fill) Use of fillText() to draw text on canvas: This example will set font to…


Gradients can be used to fill rectangles, circles, lines, text, etc. Shapes on the canvas. There are two different types of gradients: createLinearGradient(x,y,x1,y1) – creates a linear gradient createRadialGradient(x,y,r,x1,y1,r1) – creates a radial/circular gradient For a gradient object, must have two colors. The addColorStop() method specifies the color stops, and its position along the gradient….


To draw a circle on a canvas, use the following methods: beginPath(); arc(x,y,r,start,stop) Define a circle with the arc() method. Then use the stroke() method to actually draw the circle.   Source Code: <!DOCTYPE html> <html> <body> <canvas id=”myCanvas” width=”200″ height=”100″ style=”border:1px solid #d3d3d3;”> Your browser does not support the canvas element. </canvas> <script> var…