Skip to content

Conversation

@KenStoneBlue
Copy link
Contributor

…ml canvas element id

The canvas element id is 'tutorial'.
But the simple example is doing a get element by id of 'canvas' Changing the get element by id to 'tutorial' will allow the simple example to run and draw the two intersecting rectangles.

Description

The canvas element id is 'tutorial'.
But the simple example is doing a get element by id of 'canvas' Changing the get element by id to 'tutorial' will allow the simple example to run and draw the two intersecting rectangles.

Motivation

Currently the simple example does not run because the canvas element id does not match the javascript simple example.

Additional details

Related issues and pull requests

…ml canvas element id

The canvas element id is 'tutorial'.
But the simple example is doing a get element by id of 'canvas'
Changing the get element by id to 'tutorial' will allow the simple example to run and draw the two intersecting rectangles.
@KenStoneBlue KenStoneBlue requested a review from a team as a code owner June 12, 2025 03:11
@KenStoneBlue KenStoneBlue requested review from wbamberg and removed request for a team June 12, 2025 03:11
@github-actions github-actions bot added Content:WebAPI Web API docs size/xs [PR only] 0-5 LoC changed labels Jun 12, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Jun 12, 2025

Preview URLs

(comment last updated: 2025-06-12 16:42:41)

@wbamberg
Copy link
Collaborator

Thanks for filing! This is a regression introduced in #39757, which changed the id to "tutorial" but didn't update the JavaScript.

The only issue I have with this PR is that this page is part of a series, which follow the same pattern (see e.g. the example in https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_fillstyle_example) and it would be good for them all to use the same id value of "tutorial".

I don't know if you want to extend this PR to update all the other pages in this tutorial If you don't I'll just merge this and take care of the others :).

@Josh-Cena Josh-Cena changed the title Update index.md to fix the get element by id argument to match the ht… Fix element ID Jun 12, 2025
@Josh-Cena
Copy link
Member

Apparently, this is the only page that uses id="tutorial" while all other pages use canvas... Much easier to be updated in the other direction

@github-actions github-actions bot added the size/s [PR only] 6-50 LoC changed label Jun 12, 2025
@KenStoneBlue
Copy link
Contributor Author

Looks good to me thanks Josh and wbamberg

@wbamberg
Copy link
Collaborator

Apparently, this is the only page that uses id="tutorial" while all other pages use canvas... Much easier to be updated in the other direction

The reason I didn't suggest that was that #39757 changed the id from "canvas" to "tutorial" and I had assumed there was a reason behind that. If there isn't, I agree, easier to revert this change.

@Josh-Cena
Copy link
Member

The reason was because the init template before that used id="tutorial" so I copied that as the source of truth... but turned out that was actually the odd one.

@Josh-Cena Josh-Cena mentioned this pull request Jun 13, 2025
Copy link
Collaborator

@wbamberg wbamberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 thank you!

@wbamberg wbamberg merged commit 43700a5 into mdn:main Jun 17, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Content:WebAPI Web API docs size/s [PR only] 6-50 LoC changed size/xs [PR only] 0-5 LoC changed

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants