Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #30970 > unrolled thread

HTML inside a CANVAS

Back to article view | Back to comp.lang.javascript

Contents

  HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-25 11:22 -0700
    Re: HTML inside a CANVAS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-07-25 11:49 -0700
      Re: HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-26 10:56 -0700
        Re: HTML inside a CANVAS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-07-26 16:26 -0700
          Re: HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-28 07:22 -0700
            Re: HTML inside a CANVAS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-07-28 07:54 -0700
              Re: HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-31 12:19 -0700
                Re: HTML inside a CANVAS "Christoph M. Becker" <cmbecker69@arcor.de> - 2016-08-01 12:16 +0200
                  Re: HTML inside a CANVAS Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2016-08-01 14:51 +0200
    Re: HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-26 10:57 -0700
      Re: HTML inside a CANVAS "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-07-27 00:21 +0200
      Re: HTML inside a CANVAS "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-07-26 16:12 -0700
        Re: HTML inside a CANVAS bit-naughty@hotmail.com - 2016-07-28 07:22 -0700

#30970 — HTML inside a CANVAS

I know next to nothing about CANVAS, but - say, if I want a form *inside* it, with text boxes and a submit button like normal..... - is that possible? How?


Thanks.

[toc] | [next] | [standalone]

#30971

On Monday, July 25, 2016 at 1:22:39 PM UTC-5, bit-n...@hotmail.com wrote:
> I know next to nothing about CANVAS, but - say, if I want a form *inside* it, with text boxes and a submit button like normal..... - is that possible? How?
> 
> 
> Thanks.

Implement it yourself, from pixels upwards [1].

In other words, unless you are actively trying to create your own rendering engine and if you're asking such a question, you're probably approaching problem wrong.

Why not simply use HTML and/or SVG?

[1] This would be a very ambitious project to pursue. I've considered it myself on more than one occasion, but is terribly involved. Some people have made some progress in this direction. For example: <http://www.zebkit.com/>

[toc] | [prev] | [next] | [standalone]

#30972

On Tuesday, July 26, 2016 at 12:20:37 AM UTC+5:30, Michael Haufe (TNO) wrote:

> [1] This would be a very ambitious project to pursue. 


What's so ambitious about it? *Every single game* ever made has implemented its own UI (like, to choose "1 player/2 player", high scores, input your name and all), to me this is far more fun than HTML and CSS (which I don't know very well), which, if you use, your site will still look the same as all other sites on the web....

I don't want to write a "rendering *engine*" (whatever that is), just like, display some text in a font I want, without the nightmare of HTML and CSS....

That Zebkit thing looks cool, yeah....

[toc] | [prev] | [next] | [standalone]

#30978

On Tuesday, July 26, 2016 at 12:56:43 PM UTC-5, bit-n...@hotmail.com wrote:
> On Tuesday, July 26, 2016 at 12:20:37 AM UTC+5:30, Michael Haufe (TNO) wrote:
> 
> > [1] This would be a very ambitious project to pursue. 
> 
> 
> What's so ambitious about it? *Every single game* ever made has implemented its own UI (like, to choose "1 player/2 player", high scores, input your name and all), to me this is far more fun than HTML and CSS (which I don't know very well), which, if you use, your site will still look the same as all other sites on the web....
> 
> I don't want to write a "rendering *engine*" (whatever that is), just like, display some text in a font I want, without the nightmare of HTML and CSS....
> 

Your original question was about rendering a form, which I assume meant rendering a functional HTML inside of the canvas tag. This would require a significant amount of effort to accomplish as the HTML spec is non-trivial.

If you want some naive form, it would still be quite involved as you would still have to implement your own event listeners, your own scene graph, and a limited rendering engine to handle it. Making a UI is fine. I didn't say it was difficult, it's just... involved if you are starting from scratch and I honestly don't think you have the prerequisite knowledge to create one in any reasonable amount of time at the moment. 

I would of course give you an outline if desired on how to implement such a thing of course, but the labor is quite extensive if doing it from nearly first principals with little more than the CANVAS API. Hence my question, why bother when SVG and HTML is already at hand? 


> That Zebkit thing looks cool, yeah....

An interesting experiment for sure, but if you take a look at the implementation of TextField for example you might get an idea about what's potentially involved:

<https://github.com/barmalei/zebra/blob/master/src/ui.TextField.js>

There are better ways to approach this of course from an architectural level, but the amount of code to be written is still non-trivial.

Your video game authors generally re-use existing work

[toc] | [prev] | [next] | [standalone]

#30989

On Wednesday, July 27, 2016 at 4:56:58 AM UTC+5:30, Michael Haufe (TNO) wrote:

> Your original question was about rendering a form, which I assume meant rendering a functional HTML inside of the canvas tag. 


Ooops, oops, oops - I think I may have worded my question wrongly! :)
What I wanted to do was, for example if there's a form asking for "username" and password", then - just like: context.fillText("Username:", 50,50) to print the text....
Now obviousy, if *I* have to code the SUBMIT button, ie. catch when there's a mouseclick on it, then probably open a WebSocket (is there another way) to the server, gather up all the data, and send it - was just hoping whether W3C or Brendan Eich or whoever could like, help me out a little? :) ie. can I print the *text* ("Username:") as above, and then somehow put in the form input fields, and the SUBMIT button, in HTML?? I guess that's what I'm asking.....

It *does* sound pretty impossible, I have to admit....

[toc] | [prev] | [next] | [standalone]

#30991

On Thursday, July 28, 2016 at 9:22:15 AM UTC-5, bit-n...@hotmail.com wrote:
> On Wednesday, July 27, 2016 at 4:56:58 AM UTC+5:30, Michael Haufe (TNO) wrote:
> 
> > Your original question was about rendering a form, which I assume meant rendering a functional HTML inside of the canvas tag. 
> 
> 
> Ooops, oops, oops - I think I may have worded my question wrongly! :)
> What I wanted to do was, for example if there's a form asking for "username" and password", then - just like: context.fillText("Username:", 50,50) to print the text....

Which is exactly what you'd do for drawing text to a canvas. The methods are fillText and strokeText:

<https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/strokeText>
<https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText>

> Now obviousy, if *I* have to code the SUBMIT button, ie. catch when there's a mouseclick on it, then probably open a WebSocket (is there another way) to the server, gather up all the data, and send it - was just hoping whether W3C or Brendan Eich or whoever could like, help me out a little? :) ie. can I print the *text* ("Username:") as above, and then somehow put in the form input fields, and the SUBMIT button, in HTML?? I guess that's what I'm asking.....

You still haven't said WHY you want to do it this way. You're in a web browser, the web browser already has an HTML form and SVG support. WHY try to recreate it in canvas?

> It *does* sound pretty impossible, I have to admit....

Just very time consuming if starting from scratch, hence you need a good reason to pursue it

[toc] | [prev] | [next] | [standalone]

#30998

On Thursday, July 28, 2016 at 8:24:34 PM UTC+5:30, Michael Haufe (TNO) wrote:

> You still haven't said WHY you want to do it this way. You're in a web browser, the web browser already has an HTML form and SVG support. WHY try to recreate it in canvas?


Oh....it's just more intuitive for me, something I'm completely used to - comes from BASIC I guess, as a kid - you know, INPUT A$; and PRINT AT 10,10; "Hello:" ...?
As far as I'm concerned, CSS is STILL a nightmare! All that stuff about "normal flow" and what not - you never know where your text will end up, on screen!....

[toc] | [prev] | [next] | [standalone]

#31004

On 31.07.2016 at 21:19, bit-naughty@hotmail.com wrote:

> On Thursday, July 28, 2016 at 8:24:34 PM UTC+5:30, Michael Haufe (TNO) wrote:
> 
>> You still haven't said WHY you want to do it this way. You're in a web browser, the web browser already has an HTML form and SVG support. WHY try to recreate it in canvas?
> 
> Oh....it's just more intuitive for me, something I'm completely used to - comes from BASIC I guess, as a kid - you know, INPUT A$; and PRINT AT 10,10; "Hello:" ...?
> As far as I'm concerned, CSS is STILL a nightmare! All that stuff about "normal flow" and what not - you never know where your text will end up, on screen!....

With a canvas you might not even know whether the text ends up on the
screen at all, though.  Furthermore, reading text rendered as image is
hard or even impossible for some.

-- 
Christoph M. Becker

[toc] | [prev] | [next] | [standalone]

#31005

Christoph M. Becker wrote:

> On 31.07.2016 at 21:19, bit-naughty@hotmail.com wrote:
>> On Thursday, July 28, 2016 at 8:24:34 PM UTC+5:30, Michael Haufe (TNO)
>> wrote:
>>> You still haven't said WHY you want to do it this way. You're in a web
>>> browser, the web browser already has an HTML form and SVG support. WHY
>>> try to recreate it in canvas?
>> 
>> Oh....it's just more intuitive for me, something I'm completely used to -
>> comes from BASIC I guess, as a kid - you know, INPUT A$; and PRINT AT
>> 10,10; "Hello:" ...? As far as I'm concerned, CSS is STILL a nightmare!
>> All that stuff about "normal flow" and what not - you never know where
>> your text will end up, on screen!....
> 
> With a canvas you might not even know whether the text ends up on the
> screen at all, though.  Furthermore, reading text rendered as image is
> hard or even impossible for some.

ACK.  Canvas is for *bitmap* graphics.  Use Canvas for that, SVG for vector 
graphics, and (X)HTML for Web forms.  Or, as Scotty said^Wyelled, “Houw many 
times do I have to tell ye???  The rrright tool for the rrright job!!!” ;-)
 
-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | SVN: <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | ES Matrix: <http://PointedEars.de/es-matrix>
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#30973

Btw, is it also possible to have VIDEO inside a CANVAS?

[toc] | [prev] | [next] | [standalone]

#30976

bit-naughty@hotmail.com wrote on 26 Jul 2016 in comp.lang.javascript:

> Btw, is it also possible to have VIDEO inside a CANVAS?

Will you please try to uphold sensible Netiquette and quote what you are 
responding on, or start a new thread.

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#30977

On Tuesday, July 26, 2016 at 12:58:16 PM UTC-5, bit-n...@hotmail.com wrote:
> Btw, is it also possible to have VIDEO inside a CANVAS?

Yes, you can pass a reference to the video element to the canvas drawImage method to render a single frame.

Details:

<https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Manipulating_video_using_canvas>

[toc] | [prev] | [next] | [standalone]

#30990

On Wednesday, July 27, 2016 at 4:42:32 AM UTC+5:30, Michael Haufe (TNO) wrote:
> On Tuesday, July 26, 2016 at 12:58:16 PM UTC-5, bit-n...@hotmail.com wrote:
> > Btw, is it also possible to have VIDEO inside a CANVAS?
> 
> Yes, you can pass a reference to the video element to the canvas 


Thanks for the help, man.

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web