Q:

Canvas (HTML) appears to be zooming, when instead I want a larger canvas with more pixels

Canvas appears to be zooming, when instead I am trying to make a larger canvas.
If I set my canvas at 200 by 300 px, all is well, but when I choose much larger sizes, it gives me the size that I want, but with swollen pixels instead of more pixels.
See below; if you were to replace 300px, 200px in the canvas element with 800px by 800px instead of making a larger canvas with more pixels, it seems to zoom in, keeping a small number of pixels.  (Am I missing something, why is the maximum size of my canvas so small?)
Thanks for help.
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<head>
<title>Title Here Perhaps</title>
<style>

</style>    

<script type="text/javascript">
        "use strict";

    var canvas;    // DOM object corresponding to the canvas
    var graphics;  // 2D graphics context for drawing on the canvas
    var ctx;  // 2D graphics context for drawing on the canvas
    var myNumber = 0, myNumber2 = 0, myInterval,  myInterval2, myelement, thisdiv,     printx;
        var mycoords = new Array();

    function runfunction() {

        var w = window, d = document, e = d.documentElement, g =     d.getElementsByTagName('body')[0];

    var wWidth = w.innerWidth || e.clientWidth || g.clientWidth;
    var wHeight = w.innerHeight|| e.clientHeight|| g.clientHeight;

    //var canvasdiv = d.getElementById("canvasdiv");
    //canvasdiv.style.height = wHeight+"px";
    //canvasdiv.style.width = wWidth+"px";
    graphics.fillStyle = "brown";
    graphics.fillRect(0.5,0.5,600,600);

}

function DefineCurve (Ii,Jj, Theta, Aa, Fr) {

    var mytop = Jj, myleft;
    var coords = new Array();
    coords[0] = new Array();
    coords[1] = new Array();
    var Jy1;
    var Jy2;
    var Ix2;

    for(var Ix1 = 1; mytop>0; Ix1++){

        Jy1 = Aa*Math.sin(Ix1*Fr);
        Jy2 = Ix1*Math.sin(Theta) + Jy1*Math.cos(Theta);
        Ix2 = Ix1*Math.cos(Theta) - Jy1*Math.sin(Theta);
        myleft = Ii + Ix2 - 1;
        mytop = Jj - Jy2;
        coords[0][Ix1-1] = myleft;
        coords[1][Ix1-1] = mytop;

        }

    return coords;
}

function get_random_colour() {

    var letters = '0123456789ABCDEF'.split('');
    var colour = '#';
    for (var i = 0; i < 6; i++ ) {
        colour += letters[Math.round(Math.random() * 15)];
    }

    return colour;
}

function changecolour(){

    var myInterval = window.setInterval(function (a,b) {

            var printx = mycoords[0].length;
            var printy = mycoords[1].length;

            for (Ii = 0; Ii<printx; Ii++){
                var mycolour = get_random_colour();

                var leftcoord = Math.round(mycoords[0][Ii]);
                var topcoord = Math.round(mycoords[1][Ii]);
                graphics.beginPath();
                graphics.fillStyle = mycolour;
                graphics.arc(leftcoord,topcoord,1,0,2*Math.PI);
                graphics.fill()

            }

        myNumber++;
    },10);
}

function init() {
    try {
        canvas = document.getElementById("theCanvas");
        graphics = canvas.getContext("2d");
        //ctx = canvas.getContext("2d");
    }
    catch (e) {
        document.getElementById("message").innerHTML =
            "Sorry, this page requires canvas graphics, but<br>" +
            "it looks like your browser does not support it<br>" +
            "Reported error: " + e;
        return;
    }
    var mytheta = Math.PI / 4;
    mycoords = DefineCurve (1,175,mytheta,10,0.05);
    runfunction();

    changecolour();

}
</script>
</head>
<body onload="init()">

<h2>Title Here Perhaps</h2>

<p>Text Here Perhaps</p>

<!-- For error reporting:  the contents of the noscript tag are
     shown only if JavaScript is not available.  The paragraph with
     id="message" is for reporting errors using JavaScript.-->
<noscript><b>This page requires JavaScript, which is<br>
   not enabled in your browser.</b></noscript>
<p id="message" style="color:red"></p>

<!--<div id="canvasdiv">-->
<canvas id="theCanvas"
            style="background-color: blue; width: 300px; height: 200px; position: absolute; top: 0; left: 0; z-index: 0"></canvas>

</body>
</html>

A:

The canvas element response different if you set width/height with css from the attributes set.
<canvas style="width:30px;"></canvas>

is not the same with 
<canvas width="30"></canvas>

more info here: 
Canvas is stretched when using CSS but normal with "width" / "height" properties

