html5 - changing width of canvas makes content disappear

[dsdsdsdsd]

hello;

I have a canvas object with a simple line in it. The problem is that when I resize my browser the line disappears, even if I just barely resize my browser.

I thought that maybe after onResize I needed to call some_kind_of_render_update_method, but so far I haven't found anything like that.

...
<div id    = "canvas_div"
     style = "position:absolute;top:50%;left:50%;width:50%;height:50%;">
  <canvas id    = "canvas"
          style = "position:absolute;top:0%;left:0%;width:100%;height:100%;">
  </>
</>
...

<script>
function onLoad()
  { draw    () ;
    onResize() ; // inits width/height
  }
function onResize()
  { 
    my_canvas.width  = jQuery( "#canvas_div" ).outerWidth ( true ) ; 
    my_canvas.height = jQuery( "#canvas_div" ).outerHeight( true ) ; 
    // use jquery here simply because I get a reliable value across browsers.
  }
function draw()
  { my_canvas_context.moveTo(  50   ,  50  ) ;
    my_canvas_context.lineTo( 100   , 100  ) ;
    my_canvas_context.stroke();
  }

</> 

any thoughts?


thanks,
Shannon