Home

Welcome to the 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 _stack array_

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 _Queue array_

---

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.
  For example:

  const ctx = document.querySelector('canvas').getContext('2d');
  let s = new Shapes(ctx);

• 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:
  s.box(start_x, start_y, width, height);

  For example:
  s.box(0, 0, 10, 10);
s.stroke('black');//to make a stroked box
s.fill('red'); //to make a filled box

• Circle:
  s.circle(start_x, start_y, radii);

  For example:
  s.circle(10, 10, 10);
s.stroke('black');//to make a stroked ball
s.fill('red'); //to make a filled ball

• Triangle:
  

  1. Equilateral: s.eqTri(length, start_x, start_y, rotate_angle);

  rotate is not mandatory and it's default value is 0. For example:
  s.eqTri(10, 10, 10, 10);
s.stroke('black');//to make a stroked triangle
s.fill('red'); //to make a filled triangle

• Ellipse:
  s.ellipse(start_x, start_y, radius_x, radius_y, startangle, endangle, rotate, anticlock);

  rotate and anti-clock are not mandatory and there default values are 0 and false respectively.

  For example:
  s.ellipse(10, 10, 10, 10, Math.PI*4, 0);
s.stroke('black');//to make a stroked ellipse
s.fill('red'); //to make a filled ellipse

• Complex Shapes (more than 4 sides):
  s.complex(length, start_x, start_y, sides, angle);

  sides has a default value of 3 and angle is not mandatory and it's default values is 0.

  For example:
  s.complex(10, 10, 10, 5); //creates a pentagon
s.stroke('black');//to make a stroked ellipse
s.fill('red'); //to make a filled ellipse

                                      +++++++++++++end++++++++++++++++