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

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

Where does it make sense to put the mouseOver "canvas" mouseOut "canvas"

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

Contents

  Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 02:18 -0700
    Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 10:42 +0100
      Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 03:07 -0700
        Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 11:32 +0100
          Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 06:10 -0700
            Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 23:11 +0100
              Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 23:18 -0700
                Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" luserdroog <luser.droog@gmail.com> - 2019-10-30 00:10 -0700
                  Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-30 01:01 -0700

#37636 — Where does it make sense to put the mouseOver "canvas" mouseOut "canvas"

I am just starting with a visual editor for notes, but the whole thing with where to put things in event drive code is very fuzzy for me. The first thing i want to do is check if mouse in over the editor canvas because then i start "the click listeners on regions".

The only thing i can come up with is to put it directly when canvas loaded.
Does it make sense?

function main_canvas_init() {
  mainCanvas = document.getElementById("maincanvas");
  ctm = mainCanvas.getContext("2d");
  ctm.font = "12px Arial";
  mget_canvas_res();	
  mset_canvas_resolution();
  mainCanvas.addEventListener("mouseover", function(evt) {
	startMouseListener();
	//alert("mouse in");
  }, false);
  mainCanvas.addEventListener("mouseout", function(evt) {
	stopMouseListener();
	//alert("mouse out");			
  }, false);
}

[toc] | [next] | [standalone]

#37637

jonas.thornvall wrote on 29 Oct 2019 in comp.lang.javascript: 

> I am just starting with a visual editor for notes, but the whole thing
> with where to put things in event drive code is very fuzzy for me. The
> first thing i want to do is check if mouse in over the editor canvas
> because then i start "the click listeners on regions". 
> 
> The only thing i can come up with is to put it directly when canvas
> loaded. Does it make sense?
> 
> function main_canvas_init() {
>   mainCanvas = document.getElementById("maincanvas");
>   ctm = mainCanvas.getContext("2d");
>   ctm.font = "12px Arial";
>   mget_canvas_res();     
>   mset_canvas_resolution();
>   mainCanvas.addEventListener("mouseover", function(evt) {
>      startMouseListener();
>      //alert("mouse in");
>   }, false);
>   mainCanvas.addEventListener("mouseout", function(evt) {
>      stopMouseListener();
>      //alert("mouse out");               
>   }, false);
>}
> 

You can always add it later, I trust:

document.getElementById("maincanvas").addEventListener("mouseout"...

=========

To avoid confusion with globals or semi-globals, 
use 'let' and 'const' for local variables in functions.

Learn to use .querySelector() and .querySelectorAll().

Handy shortcuts:

const qs = (selector,context) => 
   (context || document).querySelector(selector);

const qsa = (selector,context) => 
   Array.from((context || document).querySelectorAll(selector));

So you could write:

qs("#maincanvas").addEventListener("mouseout" ...

or referencing the 4th instance of a class:

qsa(".canvases")[3].addEventListener("mouseout" ...


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

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

#37638

Den tisdag 29 oktober 2019 kl. 10:43:08 UTC+1 skrev Evertjan.:
> jonas.thornvall wrote on 29 Oct 2019 in comp.lang.javascript: 
> 
> > I am just starting with a visual editor for notes, but the whole thing
> > with where to put things in event drive code is very fuzzy for me. The
> > first thing i want to do is check if mouse in over the editor canvas
> > because then i start "the click listeners on regions". 
> > 
> > The only thing i can come up with is to put it directly when canvas
> > loaded. Does it make sense?
> > 
> > function main_canvas_init() {
> >   mainCanvas = document.getElementById("maincanvas");
> >   ctm = mainCanvas.getContext("2d");
> >   ctm.font = "12px Arial";
> >   mget_canvas_res();     
> >   mset_canvas_resolution();
> >   mainCanvas.addEventListener("mouseover", function(evt) {
> >      startMouseListener();
> >      //alert("mouse in");
> >   }, false);
> >   mainCanvas.addEventListener("mouseout", function(evt) {
> >      stopMouseListener();
> >      //alert("mouse out");               
> >   }, false);
> >}
> > 
> 
> You can always add it later, I trust:
> 
> document.getElementById("maincanvas").addEventListener("mouseout"...
> 
> =========
> 
> To avoid confusion with globals or semi-globals, 
> use 'let' and 'const' for local variables in functions.
> 
> Learn to use .querySelector() and .querySelectorAll().
> 
> Handy shortcuts:
> 
> const qs = (selector,context) => 
>    (context || document).querySelector(selector);
> 
> const qsa = (selector,context) => 
>    Array.from((context || document).querySelectorAll(selector));
> 
> So you could write:
> 
> qs("#maincanvas").addEventListener("mouseout" ...
> 
> or referencing the 4th instance of a class:
> 
> qsa(".canvases")[3].addEventListener("mouseout" ...
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

This is probably an idiotic question but why is the listener on 
  mainCanvas = document.getElementById("maincanvas");
and not on
  ctm = mainCanvas.getContext("2d");

Why is the listener attached to mainCanvas and not to ctm? Is it somedthing with the HTML dom holding the listener?

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

#37639

=?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
Oct 2019 in comp.lang.javascript: 

> Den tisdag 29 oktober 2019 kl. 10:43:08 UTC+1 skrev Evertjan.:
>> jonas.thornvall wrote on 29 Oct 2019 in comp.lang.javascript: 
>> 
>> > I am just starting with a visual editor for notes, but the whole
>> > thing with where to put things in event drive code is very fuzzy for
>> > me. The first thing i want to do is check if mouse in over the editor
>> > canvas because then i start "the click listeners on regions". 
>> > 
>> > The only thing i can come up with is to put it directly when canvas
>> > loaded. Does it make sense?
>> > 
>> > function main_canvas_init() {
>> >   mainCanvas = document.getElementById("maincanvas");
>> >   ctm = mainCanvas.getContext("2d");
>> >   ctm.font = "12px Arial";
>> >   mget_canvas_res();     
>> >   mset_canvas_resolution();
>> >   mainCanvas.addEventListener("mouseover", function(evt) {
>> >      startMouseListener();
>> >      //alert("mouse in");
>> >   }, false);
>> >   mainCanvas.addEventListener("mouseout", function(evt) {
>> >      stopMouseListener();
>> >      //alert("mouse out");               
>> >   }, false);
>> >}
>> > 
>> 
>> You can always add it later, I trust:
>> 
>> document.getElementById("maincanvas").addEventListener("mouseout"...
>> 
>> =========
>> 
>> To avoid confusion with globals or semi-globals, 
>> use 'let' and 'const' for local variables in functions.
>> 
>> Learn to use .querySelector() and .querySelectorAll().
>> 
>> Handy shortcuts:
>> 
>> const qs = (selector,context) => 
>>    (context || document).querySelector(selector);
>> 
>> const qsa = (selector,context) => 
>>    Array.from((context || document).querySelectorAll(selector));
>> 
>> So you could write:
>> 
>> qs("#maincanvas").addEventListener("mouseout" ...
>> 
>> or referencing the 4th instance of a class:
>> 
>> qsa(".canvases")[3].addEventListener("mouseout" ...
>> 
> 
> This is probably an idiotic question but

Why do you demean yourself by stating a q is idiotic?
Omitting that is not hubris.

> why is the listener on 
>   mainCanvas = document.getElementById("maincanvas");
> and not on
>   ctm = mainCanvas.getContext("2d");
> 
> Why is the listener attached to mainCanvas and not to ctm? Is it
> somedthing with the HTML dom holding the listener? 

[1] Probably because that is your code.

[2] [I prefer svg to canvas,]
    is that ctm [pointing to] a DOM-object?

<https://developer.mozilla.org/en-
US/docs/Web/API/HTMLCanvasElement/getContext>

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

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

#37640

Den tisdag 29 oktober 2019 kl. 11:32:31 UTC+1 skrev Evertjan.:
> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
> Oct 2019 in comp.lang.javascript: 
> 
> > Den tisdag 29 oktober 2019 kl. 10:43:08 UTC+1 skrev Evertjan.:
> >> jonas.thornvall wrote on 29 Oct 2019 in comp.lang.javascript: 
> >> 
> >> > I am just starting with a visual editor for notes, but the whole
> >> > thing with where to put things in event drive code is very fuzzy for
> >> > me. The first thing i want to do is check if mouse in over the editor
> >> > canvas because then i start "the click listeners on regions". 
> >> > 
> >> > The only thing i can come up with is to put it directly when canvas
> >> > loaded. Does it make sense?
> >> > 
> >> > function main_canvas_init() {
> >> >   mainCanvas = document.getElementById("maincanvas");
> >> >   ctm = mainCanvas.getContext("2d");
> >> >   ctm.font = "12px Arial";
> >> >   mget_canvas_res();     
> >> >   mset_canvas_resolution();
> >> >   mainCanvas.addEventListener("mouseover", function(evt) {
> >> >      startMouseListener();
> >> >      //alert("mouse in");
> >> >   }, false);
> >> >   mainCanvas.addEventListener("mouseout", function(evt) {
> >> >      stopMouseListener();
> >> >      //alert("mouse out");               
> >> >   }, false);
> >> >}
> >> > 
> >> 
> >> You can always add it later, I trust:
> >> 
> >> document.getElementById("maincanvas").addEventListener("mouseout"...
> >> 
> >> =========
> >> 
> >> To avoid confusion with globals or semi-globals, 
> >> use 'let' and 'const' for local variables in functions.
> >> 
> >> Learn to use .querySelector() and .querySelectorAll().
> >> 
> >> Handy shortcuts:
> >> 
> >> const qs = (selector,context) => 
> >>    (context || document).querySelector(selector);
> >> 
> >> const qsa = (selector,context) => 
> >>    Array.from((context || document).querySelectorAll(selector));
> >> 
> >> So you could write:
> >> 
> >> qs("#maincanvas").addEventListener("mouseout" ...
> >> 
> >> or referencing the 4th instance of a class:
> >> 
> >> qsa(".canvases")[3].addEventListener("mouseout" ...
> >> 
> > 
> > This is probably an idiotic question but
> 
> Why do you demean yourself by stating a q is idiotic?
> Omitting that is not hubris.
> 
> > why is the listener on 
> >   mainCanvas = document.getElementById("maincanvas");
> > and not on
> >   ctm = mainCanvas.getContext("2d");
> > 
> > Why is the listener attached to mainCanvas and not to ctm? Is it
> > somedthing with the HTML dom holding the listener? 
> 
> [1] Probably because that is your code.
> 
> [2] [I prefer svg to canvas,]
>     is that ctm [pointing to] a DOM-object?
> 
> <https://developer.mozilla.org/en-
> US/docs/Web/API/HTMLCanvasElement/getContext>
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

I thought that when you refered to something by get elementById it was part of HTML DOM-object.

Well i tried to add the listener to ctm first but it said not defined, although it just was defined right above the code that added the listener.

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

#37641

=?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
Oct 2019 in comp.lang.javascript: 

> I thought that when you refered to something by get elementById it was
> part of HTML DOM-object. 

You did, I didn't.

> Well i tried to add the listener to ctm first but it said not defined,

You can only add a listener to a/some DOM element, so you can first use the 
debugger to see if ctm points to the element you think it points to.

> although it just was defined right above the code that added the
> listener.

If it says "not defined" I would assume it was not defined,
so do some testing. 

===========

Perhaps some DOM-elements do not allow a listener.

I can imagine <br> doesn't and <title></title> doesn't,
but <script> could. Maybe that is even implmentation-dependent.


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

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

#37642

Den tisdag 29 oktober 2019 kl. 23:11:20 UTC+1 skrev Evertjan.:
> =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
> Oct 2019 in comp.lang.javascript: 
> 
> > I thought that when you refered to something by get elementById it was
> > part of HTML DOM-object. 
> 
> You did, I didn't.
> 
> > Well i tried to add the listener to ctm first but it said not defined,
> 
> You can only add a listener to a/some DOM element, so you can first use the 
> debugger to see if ctm points to the element you think it points to.
> 
> > although it just was defined right above the code that added the
> > listener.
> 
> If it says "not defined" I would assume it was not defined,
> so do some testing. 
> 
> ===========
> 
> Perhaps some DOM-elements do not allow a listener.
> 
> I can imagine <br> doesn't and <title></title> doesn't,
> but <script> could. Maybe that is even implmentation-dependent.
> 
> 
> -- 
> Evertjan.
> The Netherlands.
> (Please change the x'es to dots in my emailaddress)

Well ctm isn't a DOM-object it is a canvas object, and i guess there is no event listener implemented for canvas object ***YET***

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

#37643

On Wednesday, October 30, 2019 at 1:18:08 AM UTC-5, Jonas Thörnvall wrote:
> Den tisdag 29 oktober 2019 kl. 23:11:20 UTC+1 skrev Evertjan.:
> > =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
> > Oct 2019 in comp.lang.javascript: 
> > 
> > > I thought that when you refered to something by get elementById it was
> > > part of HTML DOM-object. 
> > 
> > You did, I didn't.
> > 
> > > Well i tried to add the listener to ctm first but it said not defined,
> > 
> > You can only add a listener to a/some DOM element, so you can first use the 
> > debugger to see if ctm points to the element you think it points to.
> > 
> > > although it just was defined right above the code that added the
> > > listener.
> > 
> > If it says "not defined" I would assume it was not defined,
> > so do some testing. 
> > 
> > ===========
> > 
> > Perhaps some DOM-elements do not allow a listener.
> > 
> > I can imagine <br> doesn't and <title></title> doesn't,
> > but <script> could. Maybe that is even implmentation-dependent.
> > 
> > 
> > -- 
> > Evertjan.
> > The Netherlands.
> > (Please change the x'es to dots in my emailaddress)
> 
> Well ctm isn't a DOM-object it is a canvas object, and i guess there is no event listener implemented for canvas object ***YET***

I think 'ctm' isn't the best name. In computer graphics, CTM usually means
Current Transformation Matrix. But here you're referring to the Graphics 
Context (which includes a transformation matrix, but I think it's a synecdoche
to confuse them). The Graphics Context is a component of the canvas, but 
it's not a DOM element per se.

The Canvas most definitely *is* a DOM element. It directly corresponds to a
<canvas> tag in the HTML. 

I think the context variable would be better named 'ctx' or 'cx'.

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

#37644

Den onsdag 30 oktober 2019 kl. 08:10:49 UTC+1 skrev luserdroog:
> On Wednesday, October 30, 2019 at 1:18:08 AM UTC-5, Jonas Thörnvall wrote:
> > Den tisdag 29 oktober 2019 kl. 23:11:20 UTC+1 skrev Evertjan.:
> > > =?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
> > > Oct 2019 in comp.lang.javascript: 
> > > 
> > > > I thought that when you refered to something by get elementById it was
> > > > part of HTML DOM-object. 
> > > 
> > > You did, I didn't.
> > > 
> > > > Well i tried to add the listener to ctm first but it said not defined,
> > > 
> > > You can only add a listener to a/some DOM element, so you can first use the 
> > > debugger to see if ctm points to the element you think it points to.
> > > 
> > > > although it just was defined right above the code that added the
> > > > listener.
> > > 
> > > If it says "not defined" I would assume it was not defined,
> > > so do some testing. 
> > > 
> > > ===========
> > > 
> > > Perhaps some DOM-elements do not allow a listener.
> > > 
> > > I can imagine <br> doesn't and <title></title> doesn't,
> > > but <script> could. Maybe that is even implmentation-dependent.
> > > 
> > > 
> > > -- 
> > > Evertjan.
> > > The Netherlands.
> > > (Please change the x'es to dots in my emailaddress)
> > 
> > Well ctm isn't a DOM-object it is a canvas object, and i guess there is no event listener implemented for canvas object ***YET***
> 
> I think 'ctm' isn't the best name. In computer graphics, CTM usually means
> Current Transformation Matrix. But here you're referring to the Graphics 
> Context (which includes a transformation matrix, but I think it's a synecdoche
> to confuse them). The Graphics Context is a component of the canvas, but 
> it's not a DOM element per se.
> 
> The Canvas most definitely *is* a DOM element. It directly corresponds to a
> <canvas> tag in the HTML. 
> 
> I think the context variable would be better named 'ctx' or 'cx'.

Well i have more then one canvas so that is why i just changed a letter.
So for me this is the maincanvas thereby the m in ctm but maybe it is a bad name choice.

Just managed to identify my canvas objects "notes" on mouse over, now i just have to link them to the recorded note list to reflect what note it is over.

Then i can apply actions upon "my rectangles" canvas objects.

[toc] | [prev] | [standalone]

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

csiph-web