Edit in JSFiddle

$(document).ready(function() {
    var canvas = $("#myCanvas").get(0);
    var context = canvas.getContext("2d");

    function renderGrid(gridPixelSize, color)
    {
        context.save();
        context.lineWidth = 0.5;
        context.strokeStyle = color;

        // horizontal grid lines
        for(var i = 0; i <= canvas.height; i = i + gridPixelSize)
        {
            context.beginPath();
            context.moveTo(0, i);
            context.lineTo(canvas.width, i);
            context.closePath();
            context.stroke();
        }

        // vertical grid lines
        for(var j = 0; j <= canvas.width; j = j + gridPixelSize)
        {
            context.beginPath();
            context.moveTo(j, 0);
            context.lineTo(j, canvas.height);
            context.closePath();
            context.stroke();
        }

        context.restore();
    }

    function renderContent()
    {
        context.save();
        renderGrid(20, "red")
        //context.translate(100, 75);
        //context.rotate(45*Math.PI/180);
        //context.translate(-100, -75);
        //context.scale(2, 2);
        //context.setTransform(1, 0, 1, 1, 0, 0);
        context.beginPath();
        context.fillStyle = "Yellow";
        context.strokeStyle = "Yellow";
        context.arc(100,75,50,0.25*Math.PI,1.75*Math.PI);
        context.lineTo(100, 75);
        context.stroke();
        context.fill();
        context.restore();
    }

    renderContent();
});

<canvas id="myCanvas" width="500" height="500">
    <p>Canvas not supported.</p>
</canvas>

* {
    margin: 0; padding: 0;
}
html, body {
    height: 100%; width: 100%; background-color: #000;
}
canvas {
    display: block;
}