Html Canvas

What is the Canvas API In HTML5? HTML5 Tutorial

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 for drawing paths, boxes, circles, text, and adding images. The default size of the canvas is 300 x 150(width * length) but …

What is the Canvas API In HTML5? HTML5 Tutorial Read More »

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 path. 2. Then Call the drawing cursor to the starting point of the subpath using moveTo(x,y) Function. 3. Then draw a straight …

Canvas Lines 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, cy2) represents the two control points. (x, y) represents the point to which the curve is to be created. The start of …

Drawing Curves 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, direction) method. Here, (x, y) represents the centre of the arc. radius represents the radius of the arc. startAngle represents the angle where …

Drawing Arcs 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 on a Canvas Text Drawing Methods There are 3 types of methods which are used in Text Drawing:- FillText StrokeText …

Drawing Text Read More »

Scroll to Top