WEBT_rentalsystem/js/canvas.js

/************ GLOBAL VARS ***************/
let incrementStepsAnimation = 0.15;
let timeBetweenRedrawAnimationMS = 10;

/****************************************/
/************ CROSS SYMBOL **************/
/****************************************/
let crossProperties;

/* function that draws a Cross Symbol */
function drawCross(canvasElementId, size, canvasSize) {
  // get canvas element from HTML
  let canvas = document.getElementById(canvasElementId);
  let c = canvas.getContext('2d');
  // calculate some relative positions according to size:
  //  relativeSizeExclusions = 0...1 relative size of exclusions from the circle
  //  lineWidth = width of the stroke
  let relativeSizeExclusions = 0.7; let lineWidth = 0.05*size;
  //  d = distance from canvas border
  let d = lineWidth;
  // clear canvas
  c.clearRect(0,0,canvasSize,canvasSize);

  // draw circle
  c.lineWidth = lineWidth;
  c.fillStyle = "red";
  c.beginPath();
  c.arc(canvasSize/2, canvasSize/2, size/2-d, 0, 2 * Math.PI, false);
  c.stroke();
  c.fill();

  // draw exclusions
  c.beginPath();
  c.arc(canvasSize/2, canvasSize/2, relativeSizeExclusions*(size/2-d), 1.85 * Math.PI, 0.65 * Math.PI, false);
  c.closePath();
  c.fillStyle = "white";
  c.lineWidth = lineWidth;
  c.stroke();
  c.fill();
  c.beginPath();
  c.arc(canvasSize/2, canvasSize/2, relativeSizeExclusions*(size/2-d), 1.65 * Math.PI, 0.85 * Math.PI, true);
  c.closePath();
  c.fillStyle = "white";
  c.lineWidth = lineWidth;
  c.stroke();
  c.fill();
}

/* recurring function that draws the animation of the Cross Symbol */
function drawAnimatedCross() {
  setTimeout(drawAnimatedCross, timeBetweenRedrawAnimationMS);
  calculateNewSize(crossProperties);
  drawCross(crossProperties.canvasElementId, crossProperties.currentSize, crossProperties.maxSize);
}

/* initiates an animation of the Cross Symbol */
function animateCross(canvasElementId, size, maxSize){
  crossProperties = {
    canvasElementId: canvasElementId,
    minSize: size,
    maxSize: maxSize,
    currentSize: size,
    growing: true
  }
  drawAnimatedCross();
}

/****************************************/
/**********  CHECKMARK SYMBOL ***********/
/****************************************/
let checkmarkProperties;

/* function that draws a Checkmark Symbol */
function drawCheckmark(canvasElementId, size, canvasSize) {
  // get canvas element from HTML
  let canvas = document.getElementById(canvasElementId);
  let c = canvas.getContext('2d');
  // calculate some relative positions according to size:
  //  xPosKink = x position of kink of the checkmark
  //  yHeightHook = y position of highest point of the hook
  //  lineWidth = width of the stroke
  let xPosKink = 0.25*size; let yHeightHook = 0.5*size; let lineWidth = 0.05*size;
  //  d = distance from canvas border
  //  t = thickness of checkmark 
  let d = (canvasSize-size)/2+lineWidth; let t = 0.2*size;
  // clear canvas
  c.clearRect(0,0,canvasSize,canvasSize);

  // draw checkmark
  c.lineWidth = lineWidth;
  c.fillStyle = "green";
  c.beginPath();
  c.moveTo(xPosKink + d, canvasSize-d);
  c.lineTo(canvasSize-d, d);
  c.lineTo(canvasSize-d-t, d);
  c.lineTo(xPosKink+d, canvasSize-d-t-lineWidth/2);
  c.lineTo(d, yHeightHook+d-lineWidth/2);
  c.lineTo(d, yHeightHook+d+t);
  c.lineTo(xPosKink + d, canvasSize - d);
  c.closePath();
  c.stroke();
  c.fill();
}

/* recurring function that draws the animation of the Checkmark Symbol */
function drawAnimatedCheckmark() {
  setTimeout(drawAnimatedCheckmark, timeBetweenRedrawAnimationMS);
  calculateNewSize(checkmarkProperties);
  drawCheckmark(checkmarkProperties.canvasElementId, checkmarkProperties.currentSize, checkmarkProperties.maxSize);
}

/* initiates an animation of the Checkmark Symbol */
function animateCheckmark(canvasElementId, size, maxSize){
  checkmarkProperties = {
    canvasElementId: canvasElementId,
    minSize: size,
    maxSize: maxSize,
    currentSize: maxSize,
    growing: true
  }
  drawAnimatedCheckmark();  // start timed function
}

/****************************************/
/***************  HELPERS ***************/
/****************************************/

/* Function to calculate the new size of a canvas symbol. Requires object created in 'animateX' function. */
function calculateNewSize(symbol){
  if(symbol.growing && symbol.currentSize < symbol.maxSize){
    symbol.currentSize += incrementStepsAnimation;
  }else if(symbol.growing && symbol.currentSize >= symbol.maxSize){
    symbol.growing = false;
    symbol.currentSize -= incrementStepsAnimation;
  }else if(symbol.growing == false && symbol.currentSize > symbol.minSize){
    symbol.currentSize -= incrementStepsAnimation;
  }else if(symbol.growing == false && symbol.currentSize <= symbol.minSize){
    symbol.growing = true;
    symbol.currentSize += incrementStepsAnimation;
  }
}