The <Canvas> element is the most important element introduced by HTML5. It creates a 2d Canvas API (Application Programming Interface) using JavaScript. The <canvas> element is only a container for graphics which is used to draw graphics, on the fly, via scripting. Canvas has several methods …
Read More »Html Canvas
Canvas Lines
Canvas Lines There is a process of drawing lines on a Canvas bitmap which is more similar to that on a normal paper. Process 1. Start with a beginPath() Function and denote the start of a new …
Read More »Line Width: lineWidth
Line Width: lineWidth To define the thickness of a line use linewidth Method or Property. Code Fig5 Output
Read More »Line Color: strokeStyle
The Default color of line using stroke() is black So to change the color of line use strokeStyle property. Code Fig7 Output Fig8
Read More »Drawing Curves
There are two types of curves in HTML5 named as: Bezier Curves Quadratic Curves Drawing Bezier Curves To draw a Bezier Curve on the canvas use bezierCurveTo (cx1, cy1, cx2, cy2, x, y) method. Here, (cx1, cy1) and (cx2, …
Read More »Drawing Arcs
Drawing Arcs In HTML5, Arcs can be drawn using two types of methods Arc() Method ArcTo() Method Draw Arc using Arc() Method To draw an arc on the canvas using arc(x, y, radius, startAngle, endAngle, …
Read More »Drawing Text
Drawing Text To draw a Text on a Canvas a user can use number of methods to make it attractive. All the methods are discussed below. Let us discuss the Method used in Text Drawing …
Read More »