src/services/utils/DrawTriangle.js
// Function used to draw a triangle in the canvas
Function used to draw a triangle in the canvas
Function used to draw a triangle in the canvas
function drawTriangle(ctx, x, y, size, color) {
  const bg = shadeColor(color, 40);
  ctx.fillStyle = bg;
  ctx.fillRect(x, y, size, size);
  ctx.beginPath();
  const rotation = rand(0, 3);
  switch (rotation) {
    case 0: { 
      ctx.moveTo(x, y + size);
      ctx.lineTo(x + size, y + size);
      ctx.lineTo(x + size, y);
      break;
    }
    case 1: { 
      ctx.moveTo(x, y);
      ctx.lineTo(x + size, y + size);
      ctx.lineTo(x + size, y);
      break;
    }
    case 2: { 
      ctx.moveTo(x + size, y);
      ctx.lineTo(x, y);
      ctx.lineTo(x, y + size);
      break;
    }
    default: { 
      ctx.moveTo(x, y);
      ctx.lineTo(x, y + size);
      ctx.lineTo(x + size, y + size);
      break;
    }
  }
  ctx.closePath();
  ctx.fillStyle = color;
  ctx.fill();
}
function drawTriangle ( ctx , x , y , size , color ) { const bg = shadeColor ( color , 40 ) ; ctx . fillStyle = bg ; ctx . fillRect ( x , y , size , size ) ; ctx . beginPath ( ) ; const rotation = rand ( 0 , 3 ) ; switch ( rotation ) { case 0 : { ctx . moveTo ( x , y + size ) ; ctx . lineTo ( x + size , y + size ) ; ctx . lineTo ( x + size , y ) ; break ; } case 1 : { ctx . moveTo ( x , y ) ; ctx . lineTo ( x + size , y + size ) ; ctx . lineTo ( x + size , y ) ; break ; } case 2 : { ctx . moveTo ( x + size , y ) ; ctx . lineTo ( x , y ) ; ctx . lineTo ( x , y + size ) ; break ; } default : { ctx . moveTo ( x , y ) ; ctx . lineTo ( x , y + size ) ; ctx . lineTo ( x + size , y + size ) ; break ; } } ctx . closePath ( ) ; ctx . fillStyle = color ; ctx . fill ( ) ; }
Function used to draw a triangle in the canvas
Function used to draw a triangle in the canvas
// Back square // Bottom left // Top right // Top left // Bottom left