The Graphics Canvas coordinates are the combination of two-dimensional rectangular grid coordinates.

Canvas Coordinates

  • Coordinates belong to mathematical geometry class.
  • The UPPER-LEFT corner of the canvas has the coordinates (0,0).
  • The first value of coordinate (0 - x Coordinate) As Canvas Width.
  • The second value of coordinate (0 - y Coordinate) As Canvas Height.
Canvas Coordinates

Example of Canvas Coordinates

 window.onload = function() {
   var canvas = document.getElementById ("myCanvas"), c = canvas.getContext("2d");
   c.fillStyle = "black";
   c.fillRect(0, 0, canvas.width, canvas.height);

   c.fillStyle = "red";
   c.fillRect(20, 20, 50, 50);

   c.strokeStyle = "white";
   c.lineWidth = 10;
   c.strokeRect(20, 20, 50, 50);

   c.strokeStyle = "#7e9fc2";
   c.lineWidth(20, 20, 50, 50);
<canvas id="myCanvas" width="500" height="200"></canvas>

Result Look Like

Methods used to Draw Canvas Coordinates

Functions used to Draw the Line

  • beginPath();
  • moveTo(x, y); - It define the position.
  • lineTo(x, y); - It 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.

Functions used to Draw the 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.


GDATAMART.COM is optimized for learning & job information; The users try to improve your knowledge and practical experience through this site but we cannot warrant full correctness of all content... Learn More → | Sitemap →

© 2020 GDATAMART | All Rights Reserved