Mam kształt pół-złożony i poziomo symetryczny, który próbuję zbudować za pomocą HTML5. Podczas gdy próbowałem go ukończyć, zdałem sobie sprawę, że będzie łatwiej, jeśli będę mógł po prostu powielić połowę kształtu, odbić go lustrem i przesunąć, aby połączyć oba obrazy. Znajduję przykłady, jak odbić i przenieść kształt, ale nie, jak go powielić.

Oczywiście mam nadzieję, że nie będę potrzebował dwóch oddzielnych elementów płótna.

Oto mój kod referencyjny:

var canvas = document.getElementById(id),
      context = canvas.getContext("2d"),
      color,
      height = 50;
      width = 564;
      arrowWidth = 40,
      arrowHeight = 15,
      arrowStart = height - arrowHeight,
      edgeCurveWidth = 50;

    if (parseInt(id.substr(-1), 10) % 2) {
      color = "#F7E5A5";
    } else {
      color = "#FFF";
    }

    context.beginPath();
    context.lineWidth = 4;
    context.strokeStyle = "#BAAA72";
    context.moveTo(0, 0);
    context.quadraticCurveTo(-10, arrowStart, edgeCurveWidth, arrowStart);
    context.quadraticCurveTo(width/2 - arrowWidth/2 - 15, arrowStart - 15, width/2 - arrowWidth/2, arrowStart);
    context.quadraticCurveTo(width/2, height, width/2, height);
    context.stroke();
    context.lineTo(width/2, 0);
    context.closePath();
    context.fillStyle = color;
    context.fill();