src/services/utils/DrawDiamond.js
// Function used to draw a diamond in the canvas
Function used to draw a diamond in the canvas
Function used to draw a diamond in the canvas
function drawDiamond(ctx, x, y, size, color) {
  const bg = shadeColor(color, 40);
  ctx.fillStyle = bg;
  ctx.fillRect(x, y, size, size);
  ctx.fillStyle = color;
  const cx = x + (size / 2);
  const cy = y + (size / 2);
  ctx.translate(cx, cy); 
  ctx.rotate((45 * Math.PI) / 180);
  ctx.scale(0.71, 0.71);
  ctx.fillRect(-(size / 2), -(size / 2), size, size);
  const isHoled = rand(0, 2);
  if (isHoled === 1) {
    const newSize = size / 3;
    ctx.fillStyle = bg;
    ctx.fillRect(-((newSize) / 2), -((newSize) / 2), newSize, newSize);
  }
  ctx.setTransform(1, 0, 0, 1, 0, 0);
}
function drawDiamond ( ctx , x , y , size , color ) { const bg = shadeColor ( color , 40 ) ; ctx . fillStyle = bg ; ctx . fillRect ( x , y , size , size ) ; ctx . fillStyle = color ; const cx = x + ( size / 2 ) ; const cy = y + ( size / 2 ) ; ctx . translate ( cx , cy ) ; ctx . rotate ( ( 45 * Math . PI ) / 180 ) ; ctx . scale ( 0.71 , 0.71 ) ; ctx . fillRect ( - ( size / 2 ) , - ( size / 2 ) , size , size ) ; const isHoled = rand ( 0 , 2 ) ; if ( isHoled === 1 ) { const newSize = size / 3 ; ctx . fillStyle = bg ; ctx . fillRect ( - ( ( newSize ) / 2 ) , - ( ( newSize ) / 2 ) , newSize , newSize ) ; } ctx . setTransform ( 1 , 0 , 0 , 1 , 0 , 0 ) ; }
Function used to draw a diamond in the canvas
Function used to draw a diamond in the canvas
// Back square // draw diamond // Find center position of the shape // Transform properties // translate to center of shape // draw a hole inside the diamond (33% chance to draw it) // Reset transform