Canvas, make corner with entry data-CodePudding

I need to make app which take parameters from inputs and make figure with one corner which should be cut for quantity of pixels depended from entry data for corner. I already make function which takes parameters and make figure but I don't know how to make that angle, if somebody meet before case like this, please help me. Angle which take radius like parameter should be 90 degrees and radius mean pixels how much should be deep.

    <div >
    <canvas id="detail" width="1000" height="600"></canvas>
</div>

<div id="app">
  <div >
    <button id="rotateZ">Rotate</button>
    <span> Length: </span>
    <input id="heightInput" placeholder="Length:" type="text" />
    <span> Width: </span>
    <input id="widthInput" placeholder="Width:" type="text" />
    <span> Radius angle: </span>
    <input id="rightAngleInput" placeholder="Radius:" type="text" />
  </div>
</div>




  let detail = {
  length: 350,
  width: 250,
  lt: { radius: 0 },
  lb: { radius: 0 },
  rt: { radius: 50 },
  rb: { radius: 0 }
};

const app = document.getElementById("app");
const heightInput = document.getElementById("heightInput");
const widthInput = document.getElementById("widthInput");
const leftAngleInput = document.getElementById("rightAngleInput");
const rotateZ = document.getElementById("rotateZ");

(() => {

const myDetail = document.getElementById("detail");
const context = myDetail.getContext("2d");

  const roundRect = (x, y, w, h, radius) => {

    let r = x   w;
    let b = y   h;
    context.beginPath();
    context.strokeStyle="black";
    context.lineWidth="2";
    context.moveTo(x radius, y);
    context.lineTo(r-radius, y);
    context.quadraticCurveTo(r, y, r, y);
    context.lineTo(r, y h-radius);
    context.quadraticCurveTo(r, b, r, b);
    context.lineTo(x radius, b);
    context.quadraticCurveTo(x, b, x, b);
    context.lineTo(x, y radius);
    context.quadraticCurveTo(x, y, x radius, y);
    context.stroke();

  }
  roundRect(400, 100, detail.width, detail.length, 50);

  let rotation = 0;
  let targetRotate = 90;

  rotateZ.addEventListener("click", () => {

    let newLength =  heightInput.value;
    let newWidth =  widthInput.value;
    let newRadRight =  leftAngleInput.value;

    detail.length = newLength;
    detail.width = newWidth;
    detail.rt.radius = newRadRight;

    rotation = (rotation   targetRotate) % 360;
    myDetail.style.transform = `rotate(${rotation}deg)`;

    context.clearRect(0, 0, myDetail.width, myDetail.height);

    roundRect(400, 100, detail.width, detail.length, detail.rt.radius);
  });
})();

CodePudding user response：

The draw function to create the shape you're looking for will look very similar to the roundedRect() function you have already.

Instead of doing quadraticCurveTo() at each corner, only do it at the bottom right corner. You will also need to change the position of the control point of the curve.

The code for that function would look like this:

function draw() {
  const canvas = document.getElementById("canvas");

  const context = canvas.getContext("2d");

  const drawDetail = (x, y, w, h, rad) => {
    const r = x   w;
    const b = y   h;

    context.beginPath();
    context.strokeStyle = "black";
    context.lineWidth = "2";
    context.moveTo(x, y);
    context.lineTo(r, y);
    context.lineTo(r, b - rad);
    context.quadraticCurveTo(r - rad, b - rad, r - rad, b);
    context.lineTo(x, b);
    context.lineTo(x, y);
    context.closePath();
    context.stroke();
  };

  drawDetail(0, 0, 250, 350, 80);
}

draw();

<!DOCTYPE html>
<html>
<body>
    <div id="app"></div>

    <script src="src/index.js">
    </script>

    <canvas id='canvas' width='400' height='600'></canvas>
</body>

</html>