Hello! My problem is that I can't get JavaScript to work with HTML. I know how to use it:
but all I can do is code HTML elements and code simple games which change text and use window.prompt, window.alert, variables and if conditions to play (So only text-based games) While this is enough for static website design, this is not enough for the kinds of things I want to make, and the reason why I can't do anything is because the Canvas element doesn't seem to work when I use it. It works fine on code by other people (I can run Scratch perfectly fine, and the website uses Canvas element a lot) but not on code I make, which does not feel fun and is hard.

EDIT: Here's the code:
The canvas exists but doesn't have anything on it at all, and the keys don't work.
EDIT 2: Resolved.

What's it doing/not doing? Is there an error? What's the code you're using? The canvas element works fine for me.

Could you provide some of your code?

To me it sounds like you want to create 2D objects on the screen for an HTML5 game instead of text?

In that case, consider using CanvasRenderingContext2D or p5.js.

CTX2: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D

P5.JS: https://p5js.org/reference/

If you've already coded the game in scratch, you can use the <iframe> element with scratch.mit.edu/projects/YOUR_ID/embed as long as the project is shared.

any errors? make sure to use getContext.

breakfast_for_dinner wrote:

any errors? make sure to use getContext.

let canvasElement = document.getElementById("put_the_id_here");
let ctx = canvasElement.getContext("2d");

It worked, thank you! (The keys don't work, though)

It's still hard to help if we don't have any code, but to get keyboard input you would do something like:

blubby4 wrote:

It's still hard to help if we don't have any code, but to get keyboard input you would do something like:

addEventListener("keydown", function(event) {
// event.key is what key you're pressing, e.g. "ArrowUp", " ", "f"
})

Added the code.

There are two issues with your event listener:

• The keypress event does not exist. You can use keydown instead
  
• You're apparently trying to convert the key to lowercase, but you're not calling the toLowerCase function, so you're literally comparing if the toLowerCase function equals “a”. Add () at the end to call it, like so:
  

  window.addEventListener("keydown", function(event) {
      if (event.key.toLowerCase() == "a") {
          window.alert("You pressed the A key!")
      }
  });
  

Edit: my bad. Keypress does indeed exist, but it's deprecated and may not work on modern browsers.

While I don't have anything major to add (everything I was going to say was already said), do note that
and just
both function identically (the removal of the window object reference there is optional and designed for ease of use and memory minimization).

As another example, the document object is technically a property of window, but you can call it on its own- again, for ease of use and minimizing the total size of your file. Both of these are intentional features and present in all major (and most less well-known) browsers.

BigNate469 wrote:

While I don't have anything major to add (everything I was going to say was already said), do note that

window.alert();

and just

alert();

both function identically (the removal of the window object reference there is optional and designed for ease of use and memory minimization).

As another example, the document object is technically a property of window, but you can call it on its own- again, for ease of use and minimizing the total size of your file. Both of these are intentional features and present in all major (and most less well-known) browsers.

same goes for addEventListener and setTimeout/setInterval. Note that you can call addEventListener on a specific element, such as getting the mouse position relative to said element.