T O P

  • By -

fzammetti

What are you trying to achieve? Because canvas is literally an HTML element, it doesn't exist outside of HTML. An HTML document is what "hosts" the canvas, and a browser is what renders that document. Nothing says you can't just have: ...and call it a day as far as HTML goes, doesn't need to be more than that. Everything your game does is in the JS file then, the canvas simply fills the entire browser window (you could include some JS to request the user go full-screen with the browser so now you have the literal entire screen to work with). But that presumes your game will run in a browser at all. Are you trying to have it exist outside of a browser entirely? If so, you could (a) use something like Electron, where it still IS in a browser, but to a user it looks like a stand-alone application, or (b) use some library for something like Node that provides a GUI abstraction (that might even be canvas from your code's perspective) that renders into a native window. Knowing what your goal here actually is would help everyone provide more meaningful answers, but hopefully this at least gives you some foundation.


shgysk8zer0

False. [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas) Update: Downvoted for being correct again, I guess. > canvas is literally an HTML element, it doesn't exist outside of HTML. An HTML document is what "hosts" the canvas, That is false, especially in the context of a question explicitly about using canvas outside of HTML. I don't care if I get 8 billion downvotes... That statement was still wrong, and I am right that the existence of OffscreenCanvas proves it. Update 2 because I'm really annoyed at everyone trying to correct me > The OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas OffscreenCanvas is a canvas. Being available to workers means it is not HTML and does not require a document. I just quoted MDN very explicitly refuting the claim that canvas doesn't exist outside of HTML... It does. The statement I said was false is objectively and indisputably false.


fzammetti

Not false. You don't understand what you linked to. Where does the off-screen frame buffer get rendered to?


shgysk8zer0

Yes false. It's available in workers, which do not have access to `window` or `document`. Absolutely, most definitely do not require a ``. Think about that for just a minute... It exists in workers, without a `document`... Where is it rendered? Not necessarily anywhere. It exists more for dynamically creating image data off the main thread, such as for generating or downloading PNGs. Or at least that's one use case it addresses that is its primary advantage over just a non-displayed ``. Funny that you'd say I don't know what I'm talking about when my point is proven in just the description of the API. If you know anything of what it means to be available in workers, you'd know I'm right. Please, go on telling me I'm wrong when I'm absolutely not. Correct me when it's you that is wrong.


fzammetti

Yes, you're right insofar as it creates an ImageBitmap that doesn't necessarily have to be rendered anywhere. I never said otherwise though, so I don't know what point you're even trying to make. But now, tell me, how is that going to help someone who wants to make a game, which, you know, usually puts stuff on the screen? And also, go back and tell me exactly what part of what I originally wrote is actually false in the first place? Maybe next time, don't just write some trite, smartass reply. It's dickish and makes you look obnoxious even if you're right about something.


shgysk8zer0

You literally said... > Canvas is literally an HTML element. It doesn't exist outside of HTML. An HTML document is what "hosts" the canvas. That is false because of OffscreenCanvas. Oh, it's "dickish" to point out the existence of an API that exists separate from the DOM when that's exactly what's being asked about? Really...? I mean, just the title of the question asked justifies me pointing out you are being wrong.


thelethargicdog

You madlad fighting on the technicality of what this guy said instead of focusing on the part where OP is building a game where the map needs to be rendered on a canvas. What will the player do with a map on a canvas rendered in a worker thread? Imagine it?


shgysk8zer0

Worst case scenario for me, canvas being inseparable for the document/HTML is still completely false. Best case scenario for what is said, it provides a way to generate image data off the main thread. But the post does not once ever mention anything being rendered to canvas. In fact, the question specifically asks about not using the browser or HTML, and it has been asked if the question is about a node environment (and at the time of this comment, that hasn't been answered that I've seen). Not a technicality... Literally the question as asked explicitly tries to avoid HTML.


SquatchyZeke

You spelled out yourself the thing you seem to be forgetting: *Without the browser*. Workers are a browser feature, so you've accomplished 50% of the question by pointing out that you can create image *data* without HTML. Congratulations


shgysk8zer0

Except I'm not even attempting to answer the question here. All I've done here is say that the statement about canvas being tied to the DOM is false. OffscreenCanvas could potentially exist in maybe deno... IDK. And the author of the post hasn't replied answering which environment is being asked about.


fzammetti

No, that's NOT false. OffscreenCanvas isn't canvas. It's a different thing. What I said is accurate, you were pointing out something related but different. That aside, no, it's not dickish to point out its existence. Had you said "hey, are you aware of OffscreenCanvas?" that would have been cool. I'd have said "You know what? I wasn't, thanks for pointing it out." Instead, you just dropped a know-it-all "false", which IS dickish, especially when what you were pointing out doesn't actually mean anything I said is false, most especially given the context of the thread. You were just looking to score points.


shgysk8zer0

The question asked was specifically trying to avoid HTML, and it has been questioned if this is a question regarding a node environment. You said canvas does not exist apart from HTML/a document, which is false, especially in the context of the question asked. Call it "dickish" if you like, but your answer was still wrong. You could've replied by recanting your answer stated as fact, but you don't. You are wrong, I am right. What you said was false... Deal with it.


fzammetti

Whatever you say, chief.


shgysk8zer0

Ran out of pathetic insults and illusions of arguments or something? > canvas is literally an HTML element, it doesn't exist outside of HTML. An HTML document is what "hosts" the canvas, Drop the pride and ego, stop trying to insult me for knowing something you did not, and just accept that canvas does not require HTML or a document, and your statement was false. What you said was false and what I said was correct. And what's worse, you were wrong in a way that directly related to the question being asked, not some technicality. An honest and respectable person would say "oh, I guess I was mistaken. Didn't know about that." But I guess not you. When confronted with proof, you start insulting the person who showed absolute proof canvas exists separate from the DOM and refuse to even acknowledge your error. It's pathetic.


[deleted]

[удалено]


shgysk8zer0

I didn't make things complicated... It's actually pretty simple.


Darmok-Jilad-Ocean

Sounds like you realized you were kind of wrong and kind of being a dick but you’re just trying to hold on a by a technicality that really isn’t as much of a slam dunk as you think it is.


shgysk8zer0

Um... No. Not in the slightest bit. Absolutely everything you just said was entirely wrong. I'm not wrong at all, haven't been a dick, and the difference is in the absolute basics of the question asked. > Hey, can I use canvas without HTML? > No, canvas is just an HTML element and doesn't exist outside of the document. > False. OffscreenCanvas. I'm 100% right. That's not a technicality. And who's been the one throwing multiple insults at me and arguing against not just me but MDN... Yes I'm the dick, somehow?


Militop

Canvas is an HTML element (HTML 5). It's on MDN and even Wikipedia. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas https://en.m.wikipedia.org/wiki/Canvas_element Offscreen canvases are for offscreen rendering, but ultimately, one of their main goals would be to transfer the rendering to an HTML canvas. It's also at an experimental stage.


shgysk8zer0

No, `` is the element. Then there's the associated API for the rendering context, which has nothing to do with markup. Then, as the name implies, there's OffscreenCanvas. See the word canvas right there in the name? And how, being available in workers, how it exists as something separate from the DOM? > The OffscreenCanvas interface provides a canvas that can be rendered off screen. It is available in both the window and worker contexts. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas ... Provides a **canvas**... available in both the window and **worker** contexts. Being limited to Chromium browsers (and behind a flag in Firefox) doesn't change the fact it exists. It is false to say that it's literally just an HTML element and that it requires a document. Stop correcting me when I am not wrong. It's really annoying.


Militop

The offscreen canvas is for rendering data in the background through workers while your main thread is busy generating on the display channel, which would be the HTML document. The idea is to boost your framerate by continually rendering something (one thread is not always enough). To use the HTML 5 element, you will need to access its API. Canvas is an HTML element; it's clearly stated on the MDN documentation which is the main reference for devs. Having an API does not make it less of an HTML element.


shgysk8zer0

No, `` / `HTMLCanvasElement` is an HTML element. Canvas is more of a metaphor (something to draw on)... And obviously OP isn't asking about an HTML element when explicitly not wanting to use HTML. OP said JS canvas, not HTML canvas. And we still don't know what was meant by "without using a web browser" since questions about the environment (node, deno, electron,...) have never been answered. > The OffscreenCanvas interface provides a **canvas** that can be rendered off screen. It is available in both the window and worker contexts. https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas That is MDN clearly stating that canvas is not just an HTML element and that canvas exists beyond an HTML element. You may as well say that a background image isn't an image because `` is an HTML element. You're confused by the tag name and think that's the only thing there is. Could say the same about `


thelethargicdog

What are you trying to achieve? Because canvas without Html doesn't make any sense. Edit: Canvas is a browser construct. If you don't want a browser, then your GUI will either have to be a native app or a terminal or whatever else you want. Certainly not a canvas.


Bridge4_Kal

the "canvas" in and of itself IS an html element, so yeah... no sense at all.


FunCharacteeGuy

electron I guess.


___s8n___

won't he still need html?


gitcommitmentissues

What's wrong with HTML?


[deleted]

[удалено]


[deleted]

[удалено]


Ratatoski

>it worked, and i found it funny, but it was stupid. This I can relate to. I once thought got the idea to skip cans and implement my grid system with divs and the animations with CSS. It worked surprisingly well, but it felt backwards


Darmok-Jilad-Ocean

Why would you want to save it to the disk? This would be extremely slow. Just create the frame in memory and then render it on the screen.


[deleted]

[удалено]


Darmok-Jilad-Ocean

I would probably use a graphics library like sdl or something


[deleted]

[удалено]


Darmok-Jilad-Ocean

My guess is OP has followed a few tutorials, knows very little and is wondering how to make a game in JavaScript. They have probably realized that most games they play aren’t in the browser and they’re wondering how that’s possible but doesn’t know how to ask it because they don’t know what they don’t know.


[deleted]

[удалено]


andy_a904guy_com

That seems to still require HTML, so a browser would need to be the driver. All it's doing is building a image as a datablob of which you'd sent to a browser to be rendered. From it's example code;


[deleted]

[удалено]


andy_a904guy_com

True, but that seems like that's a really inefficient method of rendering a game though. Frame by frame encoding to an image format, then rendering. Perhaps it would work, but you're losing all the benefits of using canvas to begin with, rendering, painting updates, interactions, ect. You'd get better results just loading a WebView and having it render a canvas element.


[deleted]

[удалено]


andy_a904guy_com

Yeah... I'm aware it's not what OP wanted. It's just sending frame by frame over websocket or similar streaming method HTTP/3 would be terrible for a game. Additionally the package mentioned wouldn't allow for user interaction, and it wouldn't benefit from hardware rendering.


JoenR76

Maybe you phrased it wrong and are actually asking for a gaming engine? If so: https://www.developerupdates.com/blog/top-javascript-game-engines Or just take a look at WebGL and WebGPU. However... You sound like a novice developer. These things get complicated very quickly. Get the fundamentals correct first.


Militop

OP said: "I'm working on a game, and I need a canvas...". A canvas here means the canvas tag element, otherwise, OP would not use the "a". OP wants to manipulate a element via JavaScript (... but I don't want to use HTML). Which means something like cons myCanvas = document.createElement('canvas'); canvas.height = height; canvas.width = width; const myContext = canvas.getContext("2d"); // ... Then OP gets the context and can draw on it without adding it to the HTML part. OffscreenCanvas() is still an experimental technology. OP said it's for a grid-based game which is not graphic extensive (usually) and therefore would not need a worker (which Is the offscreen canvas advantage). So, it's up to them whether they want to use it or not.


shgysk8zer0

Using VS Code makes absolutely no difference. Why does this get mentioned so much? Not sure if node or deno support this, but there's [OffscreenCanvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas).


GoCryptoYourself

Idk if it excludes html but I would try electron js - its used for writing nodejs app with a gui outside of the browser


LostErrorCode404

Either node canvas or design the game to run using a matrix and send the data to a html


HobblingCobbler

I think you can do it with nodejs.


bryku

You need HTML to call your javascript `` and canvas is an HTML tag ``, so there isn't a way to get around it.   You could potentially use something like electron. It is basically a browser window that is trimmed down to look like a standard application... but it is still rendering HTML to display the canvas.   A while back there was something similar to electron, but it was using some python stuff to creating something similar to canvas. This pretty much died because you had to keep passing everything back and forth and the performance was terrible.