关键字 setData 数据绑定 的问题

画一个20*20的方格，随机填充格子，实时统计格子数量并显示。

目前遇到的问题：如何前台实时显示j的数量，也就是让j和number一致？

var interval = null //
Page({
data: {
time: '显示数量', 
number:0
},
getCode: function (options) {
var that = this;
var number = that.data.sum
interval = setInterval(function () {
that.setData({
time: number + '秒'
})
}, 1000)
},
getVerificationCode() {
this.getCode();
},


onReady: function (e) {
//初始化
const ctx = wx.createCanvasContext('myCanvas')
var foodX = 70;
var foodY = 70;
var i=0;
var j=0;
//绘制背景
function backGround() {
for (var i = 1; i < 20; i++) {
ctx.beginPath()
ctx.moveTo(0, 10 * i)
ctx.lineTo(200, 10 * i)
ctx.stroke()
}
for (var i = 1; i < 20; i++) {
ctx.beginPath()
ctx.moveTo(10 * i, 0)
ctx.lineTo(10 * i, 200)
ctx.stroke()
}
ctx.draw()
}

//随机增加格子
function addFood() {
ctx.setFillStyle('#0033CC')
ctx.fillRect(foodX, foodY, 10, 10)
ctx.draw(true)
foodX = Math.floor(Math.random() * 20) * 10;
foodY = Math.floor(Math.random() * 20) * 10;
}
//统计格子数量
function sum() {
wx.canvasGetImageData({
canvasId: 'myCanvas',
x: 0,
y: 0, 
width: 200,
height: 200,
success(res) {
for (i = 0; i < res.data.length;i=i+1){
if (res.data[i]==51){
j++;
}
}
}
})
}
function load(){
sum()
console.log(j/100)
j=0
}


backGround()
setInterval(addFood, 10);
setInterval(load, 100);

}
})