Skip to content

Fix element ID #39909

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 17, 2025
Merged

Fix element ID #39909

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f21f27f
Update index.md to fix the get element by id argument to match the ht…
KenStoneBlue Jun 12, 2025
0b63553
Update index.md
Josh-Cena Jun 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions files/en-us/web/api/canvas_api/tutorial/basic_usage/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Let's start this tutorial by looking at the {{HTMLElement("canvas")}} {{Glossary
## The `<canvas>` element

```html
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas id="canvas" width="150" height="150"></canvas>
```

At first sight a {{HTMLElement("canvas")}} looks like the {{HTMLElement("img")}} element, with the only clear difference being that it doesn't have the `src` and `alt` attributes. Indeed, the `<canvas>` element has only two attributes, [`width`](/en-US/docs/Web/HTML/Reference/Elements/canvas#width) and [`height`](/en-US/docs/Web/HTML/Reference/Elements/canvas#height). These are both optional and can also be set using {{Glossary("DOM")}} [properties](/en-US/docs/Web/API/HTMLCanvasElement). When no `width` and `height` attributes are specified, the canvas will initially be **300 pixels** wide and **150 pixels** high. The element can be sized arbitrarily by {{Glossary("CSS")}}, but during rendering the image is scaled to fit its layout size: if the CSS sizing doesn't respect the ratio of the initial canvas, it will appear distorted.
Expand Down Expand Up @@ -56,7 +56,7 @@ The {{HTMLElement("canvas")}} element creates a fixed-size drawing surface that
The canvas is initially blank. To display something, a script first needs to access the rendering context and draw on it. The {{HTMLElement("canvas")}} element has a method called {{domxref("HTMLCanvasElement.getContext", "getContext()")}}, used to obtain the rendering context and its drawing functions. `getContext()` takes one parameter, the type of context. For 2D graphics, such as those covered by this tutorial, you specify `"2d"` to get a {{domxref("CanvasRenderingContext2D")}}.

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

Expand All @@ -67,7 +67,7 @@ The first line in the script retrieves the node in the DOM representing the {{HT
The fallback content is displayed in browsers which do not support {{HTMLElement("canvas")}}. Scripts can also check for support programmatically by testing for the presence of the `getContext()` method. Our code snippet from above becomes something like this:

```js
const canvas = document.getElementById("tutorial");
const canvas = document.getElementById("canvas");

if (canvas.getContext) {
const ctx = canvas.getContext("2d");
Expand Down Expand Up @@ -97,10 +97,10 @@ Here is a minimalistic template, which we'll be using as a starting point for la
</style>
</head>
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas id="canvas" width="150" height="150"></canvas>
<script>
function draw() {
const canvas = document.getElementById("tutorial");
const canvas = document.getElementById("canvas");
if (canvas.getContext) {
const ctx = canvas.getContext("2d");
}
Expand All @@ -111,7 +111,7 @@ Here is a minimalistic template, which we'll be using as a starting point for la
</html>
```

The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by listening for the {{domxref("Window/load_event", "load")}} event on the document. This function, or one like it, could also be called using {{domxref("Window.setTimeout", "setTimeout()")}}, {{domxref("Window.setInterval", "setInterval()")}}, or any other event handler, as long as the page has been loaded first.
The script includes a function called `draw()`, which is executed once the page finishes loading; this is done by putting the script after the main body content. This function, or one like it, could also be called using {{domxref("Window.setTimeout", "setTimeout()")}}, {{domxref("Window.setInterval", "setInterval()")}}, or the {{domxref("Window/load_event", "load")}} event handler, as long as the page has been loaded first.

At this point, this document should be rendered blank.

Expand All @@ -120,7 +120,7 @@ At this point, this document should be rendered blank.
To begin, let's take a look at an example that draws two intersecting rectangles, one of which has alpha transparency. We'll explore how this works in more detail in later examples. Update your `script` element content to this:

```html hidden
<canvas id="tutorial" width="150" height="150"></canvas>
<canvas id="canvas" width="150" height="150"></canvas>
```

```css hidden
Expand Down