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 -->

JAVASCRIPT：

$(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;
}