Replace alert in canvas_api_tutorial

[evelinabe]

Description

✍️ Replace alert in Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

Motivation

❓ Current example is not working, there's an ongoing issue to replace all alerts. In this case I resolved it by removing the else statement with the alert and placing a minimum value on the form input, which is the standard way of handling minimum values.

Additional details

🔗 #7566

Related issues and pull requests

🔨 Fixes (Partly) #7566

[github-actions]

Preview URLs

• /en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors

(comment last updated: 2024-07-05 17:19:22)

[Josh-Cena]

Please don't use the substring "fixes #xxx" in your description unless you are actually closing that issue, otherwise GH automatically links it.

[wbamberg]

Thanks for your PR! Unfortunately the example still doesn't work. I wonder if this is actually because of the way it's triggering the redraw call:

content/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Line 422 in d18e824

<form onsubmit="return draw();">

.

If I replace it with a more conventional click handler it seems to work fine. Also I think we can get rid of this regex:

content/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Line 395 in d18e824

if (document.getElementById("miterLimit").value.match(/\d+(\.\d+)?/)) {

...and call checkValidity() instead:

```js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");

  // Clear canvas
  ctx.clearRect(0, 0, 150, 150);

  // Draw guides
  ctx.strokeStyle = "#09f";
  ctx.lineWidth = 2;
  ctx.strokeRect(-5, 50, 160, 50);

  // Set line styles
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 10;

  // check input
  if (document.getElementById("miterLimit").checkValidity()) {
    ctx.miterLimit = parseFloat(document.getElementById("miterLimit").value);
  }

  // Draw lines
  ctx.beginPath();
  ctx.moveTo(0, 100);
  for (let i = 0; i < 24; i++) {
    const dy = i % 2 === 0 ? 25 : -25;
    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
  }
  ctx.stroke();
  return false;
}
```

```html hidden
<table>
  <tr>
    <td>
      <canvas id="canvas" width="150" height="150" role="presentation"></canvas>
    </td>
    <td>
      Change the <code>miterLimit</code> by entering a new value below and
      clicking the redraw button.<br /><br />
      <label for="miterLimit">Miter limit</label>
      <input type="number" size="3" id="miterLimit" />
      <input type="button" id="redraw" value="Redraw" />
    </td>
  </tr>
</table>
```

```js hidden
document.getElementById("miterLimit").value = document
  .getElementById("canvas")
  .getContext("2d").miterLimit;
draw();

const redraw = document.querySelector("#redraw");
redraw.addEventListener("click", draw);
```

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "", "180")}}

[evelinabe]

Thanks for your PR! Unfortunately the example still doesn't work. I wonder if this is actually because of the way it's triggering the redraw call:

content/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Line 422 in d18e824

<form onsubmit="return draw();">

.

If I replace it with a more conventional click handler it seems to work fine. Also I think we can get rid of this regex:

content/files/en-us/web/api/canvas_api/tutorial/applying_styles_and_colors/index.md

Line 395 in d18e824

if (document.getElementById("miterLimit").value.match(/\d+(\.\d+)?/)) {

...and call checkValidity() instead:

```js
function draw() {
  const ctx = document.getElementById("canvas").getContext("2d");

  // Clear canvas
  ctx.clearRect(0, 0, 150, 150);

  // Draw guides
  ctx.strokeStyle = "#09f";
  ctx.lineWidth = 2;
  ctx.strokeRect(-5, 50, 160, 50);

  // Set line styles
  ctx.strokeStyle = "#000";
  ctx.lineWidth = 10;

  // check input
  if (document.getElementById("miterLimit").checkValidity()) {
    ctx.miterLimit = parseFloat(document.getElementById("miterLimit").value);
  }

  // Draw lines
  ctx.beginPath();
  ctx.moveTo(0, 100);
  for (let i = 0; i < 24; i++) {
    const dy = i % 2 === 0 ? 25 : -25;
    ctx.lineTo(Math.pow(i, 1.5) * 2, 75 + dy);
  }
  ctx.stroke();
  return false;
}

<table>
  <tr>
    <td>
      <canvas id="canvas" width="150" height="150" role="presentation"></canvas>
    </td>
    <td>
      Change the <code>miterLimit</code> by entering a new value below and
      clicking the redraw button.<br /><br />
      <label for="miterLimit">Miter limit</label>
      <input type="number" size="3" id="miterLimit" />
      <input type="button" id="redraw" value="Redraw" />
    </td>
  </tr>
</table>

document.getElementById("miterLimit").value = document
  .getElementById("canvas")
  .getContext("2d").miterLimit;
draw();

const redraw = document.querySelector("#redraw");
redraw.addEventListener("click", draw);

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "", "180")}}

I was only focusing on the replacement for the alert functionality, but you're right, the example is not working as is. I have updated the PR with your proposed changes, thanks!

[wbamberg]

👍 thank you @evelinabe !