Home

Utility-HTML5Canvas wiki!

---

Data Structures

stacks

myStack will be used as an example variable.

• Create a new Stack Object:

  let myStack = new Stack();

• Push elements into Stack:

  myStack.push(value); //This function returns the value being added/pushed

• Pop element from Stack:

  myStack.pop(); //This function returns the popped/removed value

• Peek elements of Stack:

  myStack.view(); //This function returns the stackArray

Queues

myQueue will be used as an example variable.

• Create a new Queue Object:

  let myQueue= new Queue();

• Push elements into Queue:

  myQueue.push(value); //This function returns the value being pushed

• Pop element from the Queue:

  myQueue.pop(); //This function returns the popped value

• Peek elements of Queue:

  myQueue.view(); //This function returns the queueArray

---

Vector2D.js

Library only provides static function. I will be using v as an example variable name.

• Create a new (0,0) vector:

  let v = new Vector();

• Create a new vector at (x,y):

  let v = new Vector(x, y);

• Addition of Vectors:

  1. add two vectors:

  Vector2D.add(vector_object, vector_object);

  2. addition of vector and a constant:

  Vector2D.add(vector_object, constant);

• Scaling of Vectors:

  1. To a particular number:

  Vector2D.setMag(constant, vector_object);

  2. With a vector:

  Vector2D.mul(vector_object, vector_object);

  3. With a constant:

  Vector2D.mul(vector_object, constant);

• Subtraction of Vectors:

  1. Subtract two vectors:

  Vector2D.sub(vector_object, vector_object);

  2. Subtraction of vector and a constant:

  Vector2D.sub(vector_object, constant);

• Division of Vectors:

  1. Divide two vectors:

  Vector2D.div(vector_object, vector_object);

  2. Division of vector and a constant:

  Vector2D.div(vector_object, constant);

• Dot Product of Vectors:
  

  Vector2D.dot(vector_object, vector_object);

• Magnitude of Vector:
  

  Vector2D.magnitude(vector_object);

• Normalization of Vectors:
  

  Vector2D.normalize(vector_object);

• Limit the size of a Vector:
  

  Vector2D.limit(constant_limit, vector_object);

• Distance between two Vectors:

  Vector2D.distance(vector_object, vector_object);

• Angle between two Vectors:
  

  Vector2D.angleBetween(vector_object, vector_object);

---

Shapes.js

• Create a new Shapes object and provide canvas context interface as an argument.
  

  const ctx = document.querySelector('canvas').getContext('2d');
  let s = new Shapes({canvas: canvasElement, context: canvasElement.getContext("2d")});

• Fill
  

  /*
  NOTE: All the fields are optional.
  c:: RGB, RGBA, HEX, etc. (default:"black")
  */
  s.fill({c:"red"});

• Stroke
  

  /*
  NOTE: All the fields are optional.
  c :: RGB, RGBA, HEX, etc. (default:"black")
  path :: the canvas path object (default:last_shape_created_path)
  w :: width of line (default:1)
  dash(array) :: sets the line dash pattern (default:[])
  dashOff :: sets the line dash offset, or "phase." (default:0)
  */
  s.stroke({color:"red", dash:[4,8], w: 4});
  s.stroke({w:30});

• Lines:
  

  /*
  NOTE: All the fields are optional.
  path :: the canvas path object (default:creates_new_path)
  x :: the starting X position of the line (default:1)
  y :: the starting Y position of the line (default:1)
  x1 :: the ending X position of the line (default:10)
  y1 :: the ending Y position of the line (default:10)
  cap :: the shape used to draw the end points of lines (default:"butt")
  */
  s.line({x:100, y: 200, x1:39, y1: 44});
  s.stroke({w:30});
  s.line({x:10, y: 20, x1:39, y1: 20, cap:"round"});
  s.stroke({color:"red"});

• Rect/Square:
  

  /*
  NOTE: All the fields are optional.
  path :: the canvas path object (default:creates_new_path)
  x :: the starting X position (default:1)
  y :: the starting Y position (default:1)
  w :: the width of the rect (default:10)
  h :: the height of the rect (default:10)
  cap :: the shape used to join two line segments where they meet (default:"miter")
  */
  s.rect({x:170, y:100, w:100, h:20});
  s.fill({c:"blue"});
  s.stroke({c:"red", dash:[5,10], w:2});

• Circle:
  

  /*
  NOTE: All the fields are optional.
  path :: the canvas path object (default:creates_new_path)
  x :: the starting X position (default:20)
  y :: the starting Y position (default:20)
  r :: the radius of a circle (default:20)
  rX :: the X radius of a circle (default:20)
  rY :: the Y radius of a circle (default:20)
  rotate :: the angle in radian, to rotate (default:0)
  startAngle :: The angle at which the circle/ellipse starts (default:0)
  endAngle :: The angle at which the circle/ellipse ends (default:Math.PI*2)
  anticlock :: draws the ellipse counterclockwise (default:false)
  */
  s.ellipse({x:300, y:300, r:50});
  s.fill({c:"red"});
  s.ellipse({x:320, y:300, rX:50, rY:90});
  s.stroke({c:"green"});

• Triangle:
  

  1. Equilateral:

  /*
  NOTE: All the fields are optional.
  path :: the canvas path object (default:creates_new_path)
  x :: the starting X position (default:20)
  y :: the starting Y position (default:20)
  l :: the size/length of the triangle (default:20)
  rotate :: the angle in radian, to rotate (default:0)
  */
  s.eqTri({x:180, y:270, l:50});
  s.fill();
  s.stroke({color: "red"});

• Polygons (n number of sides):
  

  /*
  NOTE: All the fields are optional.
  path :: the canvas path object (default:creates_new_path)
  x :: the starting X position (default:20)
  y :: the starting Y position (default:20)
  l :: the size/length of the triangle (default:20)
  sides :: number of sides (default:5)
  rotate :: the angle in radian, to rotate (default:0)
  */
  s.polygon({x:170, y:270, l:50, sides:7});
  s.fill();
  s.stroke({color: "red"});