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

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

Canvas object

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

Contents

  Canvas object jonas.thornvall@gmail.com - 2017-10-24 02:23 -0700
    Re: Canvas object jonas.thornvall@gmail.com - 2017-10-24 04:05 -0700
    Re: Canvas object "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2017-10-24 10:52 -0700
      Re: Canvas object Mark Lloyd <not@mail.invalid> - 2017-10-24 16:37 -0500
      Re: Canvas object jonas.thornvall@gmail.com - 2017-10-26 01:06 -0700
        Re: Canvas object Maik Koenig <usenetspam@maikkoenig.de> - 2017-10-26 10:22 +0200
          Re: Canvas object jonas.thornvall@gmail.com - 2017-10-26 01:58 -0700

#34172 — Canvas object

I have two questions regarding the canvas.

I've only seen the canvas element declared in HTML
<canvas id="myCanvas" width="200" height="100"></canvas>

1. It it possible to make a dynamic canvas object in javascript that can be loaded and unloaded?

2. The width and height declared above is static can i make them dynamic, find out the resolution of screen and set them?

JT

[toc] | [next] | [standalone]

#34173

Den tisdag 24 oktober 2017 kl. 11:23:13 UTC+2 skrev jonas.t...@gmail.com:
> I have two questions regarding the canvas.
> 
> I've only seen the canvas element declared in HTML
> <canvas id="myCanvas" width="200" height="100"></canvas>
> 
> 1. It it possible to make a dynamic canvas object in javascript that can be loaded and unloaded?
> 
> 2. The width and height declared above is static can i make them dynamic, find out the resolution of screen and set them?
> 
> JT

When i read the W3school the only canvas attributes i can see is width and height?

But yet i see people write things like <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000000;">

And it works i get a border? Is there more attributes like background?
Well i do not think i understand how CSS interact with HTML, because these hare CSS attributes? It is hard to understand where the CSS ends and where the canvas start and how they interconnect? Is there a manual for the general understanding of this?

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

#34179

jonas.t...@gmail.com wrote:
> I have two questions regarding the canvas.
> 
> I've only seen the canvas element declared in HTML
> <canvas id="myCanvas" width="200" height="100"></canvas>
> 
> 1. It it possible to make a dynamic canvas object in javascript that can be loaded and unloaded?

> 2. The width and height declared above is static can i make them dynamic, find out the resolution of screen and set them?

yes, use the DOM like for everything else:

var c = document.createElement('canvas')
c.width = 640
c.height = 480
var ctx = c.getContext('2d')
...

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

#34186

On 10/24/2017 12:52 PM, Michael Haufe (TNO) wrote:
> jonas.t...@gmail.com wrote:
>> I have two questions regarding the canvas.
>>
>> I've only seen the canvas element declared in HTML
>> <canvas id="myCanvas" width="200" height="100"></canvas>
>>
>> 1. It it possible to make a dynamic canvas object in javascript that can be loaded and unloaded?
> 
>> 2. The width and height declared above is static can i make them dynamic, find out the resolution of screen and set them?
> 
> yes, use the DOM like for everything else:
> 
> var c = document.createElement('canvas')
> c.width = 640
> c.height = 480
> var ctx = c.getContext('2d')
> ...
> 

IIRC, if you want it to be visible you need to add it to the DOM. You 
can use the appendChild method.

-- 
62 days until the winter celebration (Monday December 25, 2017 12:00:00
AM for 1 day).

Mark Lloyd
http://notstupid.us/

"Enter any 11-digit prime number to continue."

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

#34195

Den tisdag 24 oktober 2017 kl. 19:52:27 UTC+2 skrev Michael Haufe (TNO):
> jonas.t...@gmail.com wrote:
> > I have two questions regarding the canvas.
> > 
> > I've only seen the canvas element declared in HTML
> > <canvas id="myCanvas" width="200" height="100"></canvas>
> > 
> > 1. It it possible to make a dynamic canvas object in javascript that can be loaded and unloaded?
> 
> > 2. The width and height declared above is static can i make them dynamic, find out the resolution of screen and set them?
> 
> yes, use the DOM like for everything else:
> 
> var c = document.createElement('canvas')
> c.width = 640
> c.height = 480
> var ctx = c.getContext('2d')
> ...

Hello Michael thanks for your answer, it so hard to understand how canvas and CSS interact.

When i create canvas below, i get that you can not set backgroundcolor from javascript?

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");


But still i can use CSS to set backgroundscolor? What is canvas in CSS is it the canvas declared in javascript above? Because that object to not have an attribute background? I do not understand how it can work, but it does?
Or is this some separate defined canvas object in CSS?

 canvas {
  background : #FAAAAA;
 }

When i realised it worked i tried to come up with ways to change the background color dynamically, canvas.background="#000000" but there is no such attribute called canvas so what is going on how does it work?

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

#34196

Am 26.10.2017 um 10:06 schrieb jonas.thornvall@gmail.com:

> When i realised it worked i tried to come up with ways to change the
> background color dynamically, canvas.background="#000000" but there
> is no such attribute called canvas so what is going on how does it
> work?

  <canvas id="mycanvas" width="200" height="100"></canvas>
  <input type=button
onClick="document.getElementById('mycanvas').style.background = 'green';">

Works for me in Firefox 56.

Greetz,
MK
-- 
Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
 und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!

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

#34198

Den torsdag 26 oktober 2017 kl. 10:22:30 UTC+2 skrev Maik Koenig:
> Am 26.10.2017 um 10:06 schrieb jonas.thornvall@gmail.com:
> 
> > When i realised it worked i tried to come up with ways to change the
> > background color dynamically, canvas.background="#000000" but there
> > is no such attribute called canvas so what is going on how does it
> > work?
> 
>   <canvas id="mycanvas" width="200" height="100"></canvas>
>   <input type=button
> onClick="document.getElementById('mycanvas').style.background = 'green';">
> 
> Works for me in Firefox 56.
> 
> Greetz,
> MK
> -- 
> Kopp-Verlag-Gläubige, Religionsdeppen, rechte Vollidioten
>  und ähnlicher Bio-Abfall werden ohne Hinweis ignoriert!

Thanks!

[toc] | [prev] | [standalone]

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

csiph-web