Как изменить ширину линии, используя <input type = "number">?

Question

Я хочу, чтобы, когда пользователь вводит число в 1-й input, ctx.lineWidth равно введенному значению. Предполагается, что 2-й input подтверждает ввод числа и запускает функциюsize(), который равен значению 1-го input тому, что новое значение ctx.lineWidth равно

const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";

window.addEventListener('load', () => {

  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);

    //if not holding down the mouse; nothing happens
    if (!painting) return;
    //roundness of paint
    ctx.lineCap = 'round';


    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y);
  }
  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);

});

function size() {
  const num = document.getElementById("sizeInput").value;
  ctx.lineWidth = num;
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

#c {
  border: 1px solid black;
}

#container {
  align-content: left;
}

.size {
  width: 13em;
  height: 3em;
}

<div id="container">
  <h2>SIZE:</h2>
  <form>
    <input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
    <input onclick="size()" type="button" value="confirm">
    <p id="number"></p>
  </form>

  <canvas id="c"></canvas>
</div>

Я ожидаю, что const num получает .value ввода от:

<input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">

Эта информацияиспользуется для присвоения ctx.lineWidth значению const num.

Answer 1

Прикрепите прослушиватели событий к вашей кнопке вместо использования onclick.

Следующий модифицированный код должен работать

const c = document.querySelector("#c");
c.height = window.innerHeight;
c.width = window.innerWidth;
const ctx = c.getContext("2d");
//default color
ctx.strokeStyle = "black";

let confirmButton = document.querySelector(".confirm");

window.addEventListener('load', () => {

  let painting = false;

  //when mouse is clicked; paint
  function mousedown(b) {
    painting = true;
    //allows for paint to appear without nedding to drag mouse
    mousemove(b);
  }
  //when mouse is not clicked; don't paint
  function mouseup() {
    painting = false;
    //resets path each time so multiple can be created
    ctx.beginPath();
  }

  function mousemove(b) {
    //Get correct mouse position
    var pos = getMousePos(c, b);

    //if not holding down the mouse; nothing happens
    if (!painting) return;
    //roundness of paint
    ctx.lineCap = 'round';


    //create paint wherever the mouse goes: ctx[on the canvas].lineTo[move the line to]()
    ctx.lineTo(pos.x, pos.y);
    //end the stroke and visualize paint
    ctx.stroke();
    //begins a new paint so that everything doesn't just stick to a fat line
    ctx.beginPath();
    //move the new line to wherever the mouse goes
    ctx.moveTo(pos.x, pos.y);
  }
  //starting posistion of paint line
  c.addEventListener('mousedown', mousedown);
  //ending posistion of paint line
  c.addEventListener('mouseup', mouseup);
  //whenever the mouse is moving; paint 
  c.addEventListener('mousemove', mousemove);
  confirmButton.addEventListener('click', size);
});

function size() {
  const num = document.getElementById("sizeInput").value;
  ctx.lineWidth = num;
  console.log("blah "+ ctx.lineWidth)
}

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

#c {
  border: 1px solid black;
}

#container {
  align-content: left;
}

.size {
  width: 13em;
  height: 3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <h2>SIZE:</h2>
  <form>
    <input class="size" type="number" step="1" id="sizeInput" placeholder="Type a number only" value="15">
    <input class="confirm" type="button" value="confirm">
    <p id="number"></p>
  </form>

  <canvas id="c"></canvas>
</div>