Tag: HTML5 canvas


01

Apr 2016

Stroke Properties in SVG

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 a line, text or outline of an element. Here the...

Read More


01

Apr 2016

Text Editing in SVG

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!  


01

Apr 2016

Defining path in 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 = elliptical Arc Z = closepath Note: All of the commands...

Read More


01

Apr 2016

How to create a Polyline in SVG

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 :


01

Apr 2016

How to create polygon in SVG

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 points attribute defines the x and y coordinates for each...

Read More


30

Mar 2016

Different Method & Properties of HTML Canvas

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 the horizontal distance of the shadow from the shape shadowOffsetY...

Read More


30

Mar 2016

Draw an image on HTML Canvas

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> window.onload = function() { var canvas = document.getElementById(“myCanvas”); var ctx...

Read More


30

Mar 2016

Drawing Text on the HTML Canvas

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 50px “Times New Roman” and write a filled text on...

Read More


30

Mar 2016

Different Types of Canvas Gradients Methods With Example

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. Gradient positions can be anywhere between 0 to 1. To...

Read More


29

Mar 2016

How to draw Circle on Canvas

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 canvas = document.getElementById(“myCanvas”); var ctx = canvas.getContext(“2d”); ctx.beginPath(); ctx.arc(95,50,40,0,2*Math.PI); ctx.stroke();...

Read More



Page 1 of 212