- Canvas
- Canvas Drawing API
- Canvas Graphics Attributes
- Drawing Arcs and Circles
- Drawing Bézier curves
- Line-Drawing Attributes
- Drawing Text
- Creating canvas fills and gradients
Canvas
Canvas Introduction to canvas The main purpose of canvas element is to manipulate 2d graphics or create them from scratch, rather than simply embedding existing media like what the audio and video elements do. It creates a drawing surface within an HTML document and exposes a powerful drawing API also known as the 2d rendering…
Canvas Drawing API
The canvas drawing API The canvas drawing API gives us the ability to draw things such as shapes and fills using JavaScript. It exposes a rich set of functionality through a small number of methods. The canvas context The canvas context allows us to access the canvas drawing API, which is just a collection of…
Canvas Graphics Attributes
Canvas Graphics Attributes The canvas API has a large number of graphics attributes that we use to specify: the color to be used by the fill() method the color to be used by the stroke() method the width of the lines to be drawn by the stroke() method. These attributes are not parameters of the…
Drawing Arcs and Circles
Drawing arcs and circles arc(x, y, radius, startAngle, endAngle, anticlockwise) this method is used to create an arc on the path with center (x, y), specified radius, starting and ending angles in radians. The anticlockwise parameter is a boolean variable which if true, the arc is drawn in an anticlockwise direction and if false, the…
Drawing Bézier curves
Drawing Bézier curves You can use either the arc() method or the arcTo() method to draw curved lines, but however the arcs produced have only one curved line of the same radius. To be able to fully manipulate our curves we use either the quadraticCurveTo(), or the bezierCurveTo() methods. Don’t be confused by the names…
Line-Drawing Attributes
Line-Drawing Attributes Canvas has a lot of line-drawing attributes some of which we have used in previous examples, for example the lineWidth property, which specifies the width of lines drawn by stroke() and strokeRect() methods. lineWidth The lineWidth property has a default value of 1 pixel. lineWidth can be set to any positive value, even…
Drawing Text
Drawing text Canvas draws not just shapes and lines but also text. However in reality, text drawn in canvas is drawn as an image. This means that the text is not selectable with a mouse cursor like normal text in other HTML elements. Unless you want to take advantage of the wonderful canvas transformations, there…
Creating canvas fills and gradients
Creating canvas fills and gradients Gradients can be created using the following methods: createLinearGradient(x1, y1, x2, y2) which creates a linear gradient object, where (x1; y1) is the starting point and (x2; y2) is the ending point of the gradient. createRadialGradient(x1, y1, r1, x2, y2, r2) which creates a radial (circular) gradient object, where (x1;…