using canvas output for HTML elements outside the canvas

[TinyScript]

hey guys, I'm working on something useful. Before the canvas tag you had to write a script to make a gradient for html element backgrounds. Now you can use canvas and it's as easy as ... well messing with canvas. LOL

Even I, a lover of the canvas tag, am having a bit of trouble with this.

I have this script. At one point I had the gradient img objects resizing so the gradient would not get skewed. it was simple. just set the height% at the opposite ratio of the canvas width/height. But I went to make some changes and the next thing i knew that no longer worked. I don't remember how I did it!! I'm going to have to start over if I can't figure it out.
anyway, here's the script.
Canvas only. I haven't adapted with excanvas for IE yet, but that's coming when I can figure out how I had the thing working right. It's a css issue.

I had thought I put the img objects in divs that were sized and positioned and then set the images to width 100% height= 100%*((canvas.width-canvas.height)/canvas.width)

so in my example, the canvas was 100 x 30 and the factor is 7 so it would resize the image 700% and the height would grow by the relative amount to the setting i had it.
I'll try to figure it out, but there's the script working somewhat. I want to figure out a way to resize the img objects when the user resizes the page, but I want the img to always maintain aspect ratio.
http://h1.ripway.com/stirfry/javascr...vas/todataurl/

<script>
/*ORIGINAL SCRIPT FOUND AT http://philip.html5.org/tests/canvas/misc/todataurl-png.html*/

window.onload = function () {

    	var canvas = document.getElementById('c');
  var ctx = canvas.getContext('2d');
    	var g = ctx.createLinearGradient(0, 0, 100, 50);
    g.addColorStop(0, 'rgba(255, 255, 0, 0.5)');
    g.addColorStop(0.5, '#0ff');
    g.addColorStop(1, '#00f');
   	 ctx.fillStyle = g;
    	 ctx.fillRect(0, 0, 100, 50);
    var data = canvas.toDataURL();
document.getElementById('i').src = data;
document.getElementById('EIMG').src = data;

var canvas2 = document.getElementById('c2');
    var ctx2 = canvas2.getContext('2d');
    var g2 = ctx2.createLinearGradient(0, 0, 100, 50);
    g2.addColorStop(0, 'rgba(255, 0, 255, 0.5)');
    g2.addColorStop(0.5, '#0ff');
    g2.addColorStop(1, '#00f');
    ctx2.fillStyle = g2;
    ctx2.fillRect(0, 0, 100, 50);
    var data2 = canvas2.toDataURL();
    document.getElementById('i2').src = data2;

document.getElementById('DIMG').src = data2;

 
}
</script>
<p><img id="i" width="80%" height="70px" style="position:fixed;top:0px;left:10%;display:block;">
<p><canvas id="c" width="100" height="5" style="position:fixed;top:-50px;"></canvas><br><br>
<div id="EDiv" width="100%"height"30px"><img id="EIMG" width="100%" height="30px"><div id="EText" style="position:relative;left:0px;top:-30px;width:100%;height:30px;"><a href="#">Hello Canvas</a><a href="#"> Another link</a></div></div>
<img id="i2" width="80%" height="180%" style="display:block;margin-left:auto;margin-right:auto;">
<p><canvas id="c2" width="100" height="30" style="position:fixed;top:-50px;"></canvas>
<div id="DDiv" width="100%"height"30px"><img id="DIMG" width="100%" height="30px"><div id="DText" style="position:relative;left:0px;top:-30px;width:100%;height:30px;"><a href="#">Hello Canvas 2</a><a href="#"> Another set of links with a different BG</a></div></div>

[Old Pedant]

Ummm...maybe I'm missing something, but if you specify *ONLY* the width OR the height of an image, the browser automatically scales the other dimension to match, thus maintaining the aspect ratio. So just never specify BOTH width and height and you are home free.

Or is it not as simple as this for you?

[TinyScript]

I mis-stated the problem. I sized the divs and attempted to get the images to fill them by 100% 100% but they would fill the whole page and ignore the sizing of the divs.

the imgs also mess up with resizing so I would just resize the height more and the gradient grows intact. Then I wanted to clip the divs and hide the overflow, but I screwed it up and what you see here is the best I can do to get handle back on it. LOL.

I'll figure it out later and post the script.

[TinyScript]

I figured it out. I was messing up the by mixing style="" and width="" height="" in the same tags. I put the widthx; and heightx; in the style="" and bingo! it does what I want.

Another lesson in CSS learned. heheh