Home

Welcome to the Utility-HTML5Canvas wiki!

description

---

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 pushed

• Pop element from Stack:
  myStack.pop();
  This function returns the popped 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 vector:
     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 vector:
     Vector2D.sub(vector_object, vector_object);
  2. Subtraction of vector and a constant:
     Vector2D.sub(vector_object, constant);

• Division of Vectors:

  1. Divide two vector:
     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.
  let s = new Shapes(canvas_context);

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

• Fill and Stroke:
  s.fill(color[rgb, rgba, hex, string]); s.stroke(color[rgb, rgba, hex, string]);

  For example:
  s.fill('gray'); s.stroke(#000000);

• Lines:
  s.line(start_x, start_y, end_x, end_y);

  For example:
  s.line(0, 0, 10, 10);
s.fill('gray');

• Box:
  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++++++++++++++++