HTML5 Canvas Grid Tilt

Question

I want to draw 80s Miami Synth grid like this in HTML5 Canvas but I don't know how to tilt it correctly. I tried using transform(); as you see in the code but it doesn't work...

Here is code:

//grid width and height
var bw = 400;
var bh = 400;
//padding around grid
var p = 10;
//size of canvas
var cw = bw + (p*2) + 1;
var ch = bh + (p*2) + 1;

var canvas = $('<canvas/>').attr({width: cw, height: ch}).appendTo('body');

var context = canvas.get(0).getContext("2d");
context.transform(1,0,0.0,1,0,0);

function drawBoard(){
    for (var x = 0; x <= bw; x += 40) {
        context.moveTo(0.5 + x + p, p);
        context.lineTo(0.5 + x + p, bh + p);
    }


    for (var x = 0; x <= bh; x += 40) {
        context.moveTo(p, 0.5 + x + p);
        context.lineTo(bw + p, 0.5 + x + p);
    }
    context.strokeStyle = "black";
    context.stroke();   
}

drawBoard();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

http://jsfiddle.net/h2yJn/3068/

I'll be thankful for some advices.