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.
  

  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:
  

  /*
  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)
  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 of the line (default:20)
  y :: the starting y position of the line (default:20)
  r :: the radius of a circle (default:20)

r :: the radius of a circle (default:20) r :: the radius of a circle (default:20) h :: the height of the rect (default:10) cap :: the shape used to join two line segments where they meet (default:"miter") */ s.ellipse({x:300, y:300, r:50}); s.fill({c:"red"});

* Triangle:<br>
1. Equilateral:
  `s.eqTri(length, start_x, start_y, rotate_angle);`
  
  **rotate is not mandatory and it's default value is 0.**
  For example:<br>
    `s.eqTri(10, 10, 10, 10);`<br>
    `s.stroke('black');//to make a stroked triangle`<br>
    `s.fill('red'); //to make a filled triangle`


* Ellipse:<br>
`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:<br>
  `s.ellipse(10, 10, 10, 10, Math.PI*4, 0);`<br>
  `s.stroke('black');//to make a stroked ellipse`<br>
  `s.fill('red'); //to make a filled ellipse`


* Complex Shapes (more than 4 sides):<br>
`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:<br>
  `s.complex(10, 10, 10, 5); //creates a pentagon`<br>
  `s.stroke('black');//to make a stroked ellipse`<br>
  `s.fill('red'); //to make a filled ellipse`

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