选择一个框并向其添加css

Question

我有this代码，用于创建网格。

相关的HTML部分是：

<canvas id = "grid" width = 400; height = 400; style="border:1px solid #000000;" ></canvas>

Javascript片段：

 var canvas = document.getElementById("grid");
            var ctx = canvas.getContext('2d');
            var i ,j;

function grid(x, y, wid, height) {
            ctx.beginPath();
                //Drawing Grid 
            for(i=0; i <= height; i+=x) {
                ctx.moveTo(0, i);
                ctx.lineTo(wid, i);
             }

            for(j=0; j <= wid; j+=y) {
                ctx.moveTo(j, 0);
                ctx.lineTo(j, height);
             }
            }

            // Function to draw grid
            //grid(x, y, width, height);
            grid(10, 10, 400, 400);

            ctx.strokeStyle = "#fff";
            ctx.stroke();

在这里，我想在某些网格框中添加一些css样式。我该怎么做呢？有任何想法吗？总之，如果我想选择这个网格的任何一个框，我该怎么办？即使需要，我也愿意改变我的整个代码。