search

jonessieka / explorercanvas

Automatically exported from code.google.com/p/explorercanvas
Apache License 2.0
0 stars 0 forks source link

Support pixel based width/height #64

Closed GoogleCodeExporter closed 9 years ago

GoogleCodeExporter commented 9 years ago 
Support pixel based width/height.

What steps will reproduce the problem?
1. Use the "px" unit when defining the canvas HTML markup.  For example, 
<canvas id="topMenuShadow" height="30px" width="1000px">
</canvas> 
2. Internet explorer pops up message saying invalid argument.  

What is the expected output? What do you see instead?

Obviously, it should run without popping up debug messages in IE.

What version of the product are you using? On what operating system?

Please provide any additional information below.

This should be easier to solve than the percentage based width/height
mentioned earlier.

The immediately visible changes are needed in functions initElement and
onPropertyChange.

For example, in the height update section of code, I updated to this and it
performed the height properly.

          var val = attrs.height.nodeValue;
          if (val.indexOf("px")>=0)
             el.style.height = val;
          else
             el.style.height = val + 'px';

Original issue reported on code.google.com by josh.gr...@gmail.com on 6 Jan 2010 at 9:54

GoogleCodeExporter commented 9 years ago 
The values in the attributes width and height must not be suffixed by "px", they
don't have units, they are always expressed in pixels. This reflects the number 
of
pixels on the canvas, like the number of pixels on a bitmap image.

You can specify the size of the canvas on the page using the CSS style 
attribute : 

    style="width: 300px; height: 150px"; 

the units can be here "%", em, cm, ...

And the generally, this size is the same as the width/height attributes, but it 
can
be different. For example, look at the size of the canvas here :

http://www.nihilogic.dk/labs/pocket_full_of_canvas/demo.php#

The canvas style is bigger than the canvas size to be faster (less pixels to 
draw)
but is still big enough on your screen (css style).

Original comment by fabien.menager on 6 Jan 2010 at 10:28