How to change width of line using an ?

Question

I want it so that when the user types in a number into the 1st input, the ctx.lineWidth equals the value put in. The 2nd input is suppose to confirm the input of the number and run the function size() which equals the value of the 1st input to what the new value of ctx.lineWidth is

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>

I expect that const num grabs the .value of the input from the:

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

That information is used to assign the ctx.lineWidth to the value of const num.

did you try `console.log()` to see if the value is properly picked up? — Dev Man, May 25 '19 at 20:07
Tip: Make it runnable in SO: https://meta.stackoverflow.com/questions/358992/ive-been-told-to-create-a-runnable-example-with-stack-snippets-how-do-i-do — , May 25 '19 at 20:09
When you click on the confirm button, you should be seeing an error. `size` is defined within the event handler for the `load` event, so it is not visible to the DOM. Use `addEventListener` to attach the event to the button. — Heretic Monkey, May 25 '19 at 20:12
Possible duplicate of [Uncaught ReferenceError: myFunction is not defined](https://stackoverflow.com/questions/15171294/uncaught-referenceerror-myfunction-is-not-defined) — Heretic Monkey, May 25 '19 at 20:14

score 1 · Answer 1 · answered May 25 '19 at 20:34

Attach event listeners to your button as opposed to using onclick.

The below modified code should work

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>

How to change width of line using an ?

1 Answers1