Graphics Canvas Drawing

← Previous Next →

Canvas can be used to draw graphs, make photo compositions or do simple animations. Basically, Canvas is a rectangle area like a white paper, we can easily call many functions on a canvas.

We can draw colorful Line, Circle, and Rectangle without animations by the Canvas.

Example of Canvas Drawing

<canvas id="myCanvas" width="200" height="100"></canvas>

Methods used to Draw Line

These are line, methods we are using for draw line:

• beginPath();
• moveTo(x, y); - moveTo() Method define the position.
• lineTo(x, y); - lineTo() Method define the coordinates
• fill(); - Example (fillRect(x, y, width, height, opecity)).
• stroke(); - Its make a line visible.
• closePath(); - Its close the othere unvisible line.
• fillStyle = "rgba(0,0,0, opicity)"
• lineCop = "round"; - It use to give shap of line.

<script> var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.moveTo(0, 0); context.lineTo(200, 100); context.stroke(); </script>

Methods used to Draw Circle

These are circle methods, we are using for draw circle:

• arc(x, y, radius, start-Angle, end-Angle (2*Math.IP), false);
• arc styled methods - lineWidth(); strokeStyle(); lineCap();

ARC methods define

arc(); Method of the Canvas 2D API adds an arc to the path which is centered at (x, y) position with radius r starting at star-Angle and ending at end-Angle.

• x, y coordinates of the arc's center point
• A radius (r)
• A star-tAngle, and end-Angle - measured clockwise from the positive x-axis
• An optional boolean - if true, the arc to be drawn counter-clockwise between the two angles.

<script> var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); context.begainPath(); context.acr(95, 50, 40, 0, 2 * Math.PI); context.stroke(); </script>

← Previous Next →