How to add background to this code using canvas | TypeScript Community | Page 1

remote narwhal Jan 28, 2025, 2:30 AM

#

I have to make this game for a school project and i can't for the life of me figure out how to add a background to this code.

#

just for clarity, the background is supposed to be an image, which is already in my VSCode

limpid zodiac Jan 28, 2025, 2:31 AM

#

does background not work on canvases?

remote narwhal Jan 28, 2025, 2:31 AM

#

how and where should i add it?

#

speak to me like i'm 5

limpid zodiac Jan 28, 2025, 2:34 AM

#

limpid zodiac does `background` not work on canvases?

seems to work fine

limpid zodiac Jan 28, 2025, 2:34 AM

#

remote narwhal how and where should i add it?

see https://mdn.io/background

remote narwhal Jan 28, 2025, 2:35 AM

#

I may be dumb, but this seems to be CSS?

limpid zodiac Jan 28, 2025, 2:36 AM

#

yes

#

css is generally how you do styling, which includes background colors/images

remote narwhal Jan 28, 2025, 2:37 AM

#

yeeees, but we're supposed to use a canvas

#

like the canvas API

limpid zodiac Jan 28, 2025, 2:37 AM

#

you have to do everything on the canvas?

remote narwhal Jan 28, 2025, 2:37 AM

#

everything is a big word, but inserting an image like that, ye? I've tried something with the constructor but that did not work

limpid zodiac Jan 28, 2025, 2:38 AM

#

have you checked out this article? i found it from searching "canvas image"

#

https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images

MDN Web Docs

Using images - Web APIs | MDN

Until now we have created our own shapes and applied styles to them. One of the more exciting features of is the ability to use images. These can be used to do dynamic photo compositing or as backdrops of graphs, for sprites in games, and so forth. External images can be used in any format supported by the browser, such as PNG, GIF, or JPEG. Yo...

#

mdn is a very good resource for web stuff, including js
it's the de-facto standard

remote narwhal Jan 28, 2025, 2:57 AM

#

limpid zodiac css is generally how you do styling, which includes background colors/images

How would I go about adding some inline css module into this?

limpid zodiac Jan 28, 2025, 2:58 AM

#

you would put style="background: url('...')" in the canvas element in html, or you would assign canvas.styles.background = "url('...')"; in js

remote narwhal Jan 28, 2025, 3:00 AM

#

Ah, so they're not actually html, it's all done with .TS scenes

#

The only html is in the index

limpid zodiac Jan 28, 2025, 3:01 AM

#

so you're doing document.createElement("canvas")?

#

you can do setAttribute as a kind of direct equivalent to the html

#How to add background to this code using canvas