Retro_1477,
делайте полноценные макеты, а не конструктор!!!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
td {
border: 1px solid black;
width: 100px;
height: 100px;
}
.field{
margin-left: auto;
margin-right: auto;
}
canvas{
display: block;
}
.can{
background-color: #FFFACD;
}
</style>
</head>
<body>
</body>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
<script>
$(function() {
var strok = 3,
stolbov = 3,
table = $("<table class='field'></table>").appendTo("body"),
n = 1;
for (var i = 0; i < strok; i++) {
var tr = $("<tr>").appendTo(table);
for (var j = 0; j < stolbov; j++) $("<td>", {
click: function() {
if ($(this).is(".can")) return;
$(this).addClass("can");
var canvas = $("<canvas width='100' height='100'>").appendTo(this)[0];
canvas = rough.canvas(canvas);
if (++n % 2) canvas.circle(50, 50, 90);
else {
canvas.line(0, 0, 100, 100);
canvas.line(100, 0, 0, 100)
}
}
}).appendTo(tr)
}
});
</script>
</html>