CanvasScaleProblem

window.onload = function() {

    var canvas = document.getElementById("canvas-el");
    canvas.width = 1100;
    canvas.height = 800;

    var ctx = canvas.getContext("2d");

    ctx.save();

    //draw the head
    ctx.fillStyle = "#90CAD7";
    ctx.beginPath();
    ctx.scale(1,0.9);
    ctx.arc(250,260, 70, 0, 2*Math.PI);
    ctx.fill();
    ctx.stroke();

    //left eye
    ctx.restore();
    ctx.beginPath();
    ctx.scale(1, 0.8);
    ctx.arc(210,260, 10, 0, 2*Math.PI);
    ctx.stroke();

    //right eye
    ctx.restore();
    ctx.beginPath();
    ctx.arc(270,260, 10, 0, 2*Math.PI);
    ctx.stroke();

    //nose
    ctx.restore();
    ctx.beginPath();
    ctx.moveTo(240, 260);
    ctx.lineTo(225, 305);
    ctx.lineTo(250,305);
    ctx.stroke();


    //draw the bottom of the hat
    ctx.restore();
    ctx.fillStyle = "#396693";
    ctx.strokeStyle = "black";
    ctx.beginPath();
    ctx.scale(1, 0.2);
    ctx.arc(250, 1100, 100, 0, 2*Math.PI);
    ctx.fill();
    ctx.stroke();

    //draw the top of the hat
    ctx.restore();
    ctx.fillStyle = "#396693";
    ctx.beginPath();
    ctx.scale(1, 1.8);
    ctx.arc(250, 250, 50, 0, 2 * Math.PI);
    ctx.fill();
    ctx.stroke();

    ctx.lineTo(300,250);
    ctx.arc(250, 580, 50, 0, Math.PI);
    ctx.lineTo(200,240);
    ctx.fill();
    ctx.stroke();
}