javascript - HTML 5キャンバスでグリッド機能にスナップしたい

Question

stackoverflow.com で次のコードを見つけました。しかし、このコードでは画像が配置されています。画像の代わりに、グリッド線が必要です。このグリッド線をキャンバスで使用したいと考えています。私を助けてください。

HTML:

<div class="demo">

    <div id="draggable5" class="draggable ui-widget-content">
        <p>I snap to a 80 x 80 grid</p>
    </div>

</div><!-- End demo -->

ジャバスクリプト:

$(function() {
    $("#draggable5").draggable({
        grid: [80, 80]
    });
});

CSS:

.draggable {
    width: 80px;
    height: 80px;
    float: left;
    margin: 0 10px 10px 0;
    font-size: .9em;
}
.ui-widget-header p, .ui-widget-content p {
    margin: 0;
}
#snaptarget {
    height: 140px;
}
body, html{
    background: url('http://i.imgur.com/FBs3b.png') repeat;
}