469,964 Members | 1,714 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,964 developers. It's quick & easy.

Resizable canvas - Problems

Hi,

I have put together a bit of JavaScript to make a square resizable canvas :-

http://www.aarongray.org/Test/JavaScript/resizable.html

Problems I have :-

a) I cannot seem to center it horrizontally
b) It does not appear to be totaly square on either of my machines.

Many thanks in advance,

Aaron

Dec 27 '06 #1
11 1912
ASM
Aaron Gray a écrit :
Hi,

I have put together a bit of JavaScript to make a square resizable canvas :-

http://www.aarongray.org/Test/JavaScript/resizable.html

Problems I have :-

a) I cannot seem to center it horrizontally
with IE :
background.style.textAlign = 'center';
with others :
canvas.style.margin = 'auto;
b) It does not appear to be totaly square on either of my machines.
without a squared background image in 'canvas', I don't know how you can
see that.
<div id="background"
style="width: 100%; height: 100%; position: relative;">
<div id="canvas"
style="border:solid 1px;position:absolute;top:50%;left:50%;">
</div>
</div>
<script type="text/javascript">

document.body.margin = '5px 5px 5px 5px';
var background = document.getElementById("background");
var canvas = document.getElementById("canvas").style;

function sizer() {
var size = Math.min(background.offsetWidth,background.offsetH eight);
canvas.marginTop = '-'+size/2+'px';
canvas.marginLeft = '-'+size/2+'px';
canvas.height = canvas.width = size+'px';
}
sizer();
window.onresize = function() { sizer(); sizer(); };
</script>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 28 '06 #2
canvas.marginLeft = '-'+size/2+'px';

'.style.marginLeft' rather than 'style.left' did the trick.

New version :-

http://www.aarongray.org/Test/JavaScript/resizable.html

Still does not look square though :(

Thanks,

Aaron
Dec 28 '06 #3
ASM
Aaron Gray a écrit :
>
Still does not look square though :(
Hu ?
http://stephane.moriaux.perso.wanado...resizable.html
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Dec 28 '06 #4
Pi
Opened up the page with firebug, seems exactly square. even verified
with the cool css rulers, all that. Then I took a sheet of paper,
marked off the edges on one side, compared it with an adjacent side.
Repeated 2 times more. Still perfect. Stop worrying so much :P
Aaron Gray wrote:
canvas.marginLeft = '-'+size/2+'px';

'.style.marginLeft' rather than 'style.left' did the trick.

New version :-

http://www.aarongray.org/Test/JavaScript/resizable.html

Still does not look square though :(

Thanks,

Aaron
Dec 28 '06 #5
"Pi" <th***********@gmail.comwrote in message
news:11*********************@73g2000cwn.googlegrou ps.com...
Opened up the page with firebug, seems exactly square. even verified
with the cool css rulers, all that. Then I took a sheet of paper,
marked off the edges on one side, compared it with an adjacent side.
Repeated 2 times more. Still perfect. Stop worrying so much :P
On IE 7 it is not square,. and thats the browser I need it on :(

Aaron
Dec 28 '06 #6
ASM
Aaron Gray a écrit :
>
On IE 7 it is not square,. and thats the browser I need it on :(
Really ?
did you try with my online test ?
and count sub-sqares in background to verfy.
(my IE Mac works correctly with this test)

Notice: you probably have to fix the body (margins and paddings)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 28 '06 #7
"ASM" <st*********************@wanadoo.fr.invalidwrote in message
news:45**********************@news.orange.fr...
Aaron Gray a écrit :
>>
On IE 7 it is not square,. and thats the browser I need it on :(

Really ?
did you try with my online test ?
Same result exactly. I have the VML test I was using it for with correct 1:1
aspect ratio anyway so do not need to follow this up any thurther.

Thanks anyway,

Aaron
Dec 28 '06 #8
VK
Aaron Gray wrote:
Hi,

I have put together a bit of JavaScript to make a square resizable canvas :-

http://www.aarongray.org/Test/JavaScript/resizable.html

Problems I have :-

a) I cannot seem to center it horrizontally
b) It does not appear to be totaly square on either of my machines.
Canvas is a drawing area for *bitmap* images, a sick invention of
Safary alas adopted for testing by Opera 9.x and Firefox ?.?

It has nor relation neither with SVG nor VML nor vector graphics as
such, so questions of a proportional scaling are not really applicable
here.

For the subject you are after this post may be useful:
<http://groups.google.com/group/mozilla.dev.tech.svg/msg/09483ba0a013db4a>

Dec 28 '06 #9
ASM
VK a écrit :
>
Canvas is a drawing area for *bitmap* images, a sick invention of
Safary alas adopted for testing by Opera 9.x and Firefox ?.?
'canvas' here is used by Aaron abusively
it is only the id of a auto-dimensioned-by-JS div

see his or mine demo pages to understand what could be his problem
(problen I didn't see)

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Dec 29 '06 #10
VK

ASM wrote:
'canvas' here is used by Aaron abusively
it is only the id of a auto-dimensioned-by-JS div
Oh, sorry to OP. It was an influence I guess of his previous questions
about SVG; I should read throughout before posting.

Dec 29 '06 #11
"VK" <sc**********@yahoo.comwrote in message
news:11**********************@h40g2000cwb.googlegr oups.com...
>
ASM wrote:
>'canvas' here is used by Aaron abusively
it is only the id of a auto-dimensioned-by-JS div

Oh, sorry to OP. It was an influence I guess of his previous questions
about SVG; I should read throughout before posting.
Okay, no problem. I am beginning to realize what I did not realize.

Pixels may not be 1:1 thus div's will not necessarily be square, but VML and
SVG as you would guess make the "canvas" a 1:1 ratio.

Thanks for the input,

Aaron
Aaron
Dec 29 '06 #12

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

reply views Thread by Mickel Grönroos | last post: by
1 post views Thread by Mickel Grönroos | last post: by
5 posts views Thread by Andrew Poulos | last post: by
2 posts views Thread by devnew | last post: by
1 post views Thread by rainxy | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.