Untitled

I've just started working with the html5 canvas element.

I'm using the latest firefox and chromium browsers.  And so far, they're
responding alike.

What I'm trying to achieve is scaling of an image without having to
specify the canvas or image drawing sizes.  I'd like the canvas to fill
the browser window, and for the image to fill the canvas scaling up or
down as needed without specifying any sizes.  And to readjust the canvas
and its image on the fly when the user adjusts the browser's frame.

The mansion pic that I'm testing with is 4284x2844.

I've managed to achieve dynamic scaling without specifying sizes, but
there's a problem...  if I don't specify sizes the image becomes blurry.


The first code results in scaling, but I've specified the canvas to some
semi-random h/v sizes.  The whole image is being drawn and scaled accurately.
You can change the browser window size and the image will scale dynamically
as you adjust the browser window.

The scaled image seems quite clear at all sizes, and I'm satisfied the way
things are working.


file: index_01.html

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>TABA_01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="taba_01.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <canvas id="taba_main_canvas" width="1000" height="750">
    Your browser does not support the canvas element.
    </ canvas>

    <script type="text/javascript">
        var main_canvas=document.getElementById("taba_main_canvas");
        var cxt=main_canvas.getContext("2d");
        var img=new Image();

        <!-- mansion pic 4284x2844 -->
        img.src="images/mansion_3344.png";

        img.onload = function()
        {
             cxt.drawImage(img,0,0,1000,750);
        }

    </script>

</body>

</html>


file:  taba_01.css

html,body
{
    background-color:#000000;

    width:  100%;
    height: 100%;

    /* without a '0px' margin there is a 2 or 3 px margin/border */
    /* that allows a bit of the bg color to border the main canvas */

    margin: 0px;

}


/* using width/height of 100% in both the 'html,body' and 'canvas' parameters will */
/* allow the canvas to be scaled during browser window size changes */


#taba_main_canvas
{
        width: 100%; height: 100%;
}


******************************************************************
Now, the problem...

When I take out size specifications the image scales as before, but
the image is very blurry and seems to be somewhat blocky at a
very small level, and there seems to be random colored noise in the
image.  The same image was nice and clear before.


file: index_02.html

<!DOCTYPE HTML>
<html lang="en">

<head>
    <title>TABA_01</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link href="taba_02.css" rel="stylesheet" type="text/css" />
</head>

<body>

    <canvas id="taba_main_canvas">
    Your browser does not support the canvas element.
    </ canvas>


    <script type="text/javascript">
        var main_canvas=document.getElementById("taba_main_canvas");
        var cxt=main_canvas.getContext("2d");
        var img=new Image();

        <!-- mansion pic 4284x2844 -->
        img.src="images/mansion_3344.png";

        img.onload = function()
        {
              cxt.drawImage(img,0,0,main_canvas.width,main_canvas.height);
        }

    </script>

</body>

</html>


file: taba_02.css

/* taba_02.css - style sheet for index_02.html */

html,body
{
    background-color:#000000;

    width:  100%;
    height: 100%;

    margin: 0px;
}


#taba_main_canvas
{
    width: 100%;
    height: 100%;
}


The full image is drawn and scales, only now, the image is not clear.
Any ideas on what I'm doing wrong, and/or why the image is now unclear?

Thanks