Below is the code I've written to interact with my canvas:
function clickBox() //Function to retrieve cell coordinates on the grid.
{
var xRectFill = 0;
var yRectFill = 0;
var rectFillArrayX = [];
var rectFillArrayY = [];
var mouseX = event.offsetX;
var mouseY = event.offsetY;
for (i3 = 0; i3 <= 8; i3++)
{
rectFillArrayX[i3] = xRectFill;
rectFillArrayY[i3] = yRectFill;
xRectFill += 72;
yRectFill += 72;
}
for (i4 = 0; i4 <= 8; i4++)
{
if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
{
for (i5 = 0; i5 <= 8; i5++)
{
if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
{
ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
}
}
}
}
}
I'm currently working on a sudoku puzzle design using a 9x9 grid. The "clickBox" function successfully retrieves mouse coordinates and clears cells upon a click event.
Now, I aim to duplicate the cleared portion of the canvas and reintegrate it whenever another area is clicked.
I've explored various techniques but failed to implement the getImageData and putImageData functions effectively.
One approach I tried involved storing X and Y coordinates when a box is cleared, then passing them to getImageData and placing putImageData during subsequent clicks. Unfortunately, this didn't yield the desired results.
The idea behind using getImageData before clearRect was to utilize the putImageData method on the previously cleared cell upon the next click.
If someone could demonstrate the proper usage of getImageData and putImageData in this scenario, that would be greatly appreciated.
Here's an attempt at solving the issue:
function clickBox() //Get every cell by coordinate on the grid.
{
var xRectFill = 0;
var yRectFill = 0;
var rectFillArrayX = [];
var rectFillArrayY = [];
var mouseX = event.offsetX;
var mouseY = event.offsetY;
if (lastLocation[0] != null)
{
ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70);
}
for (i3 = 0; i3 <= 8; i3++)
{
rectFillArrayX[i3] = xRectFill;
rectFillArrayY[i3] = yRectFill;
xRectFill += 72;
yRectFill += 72;
}
for (i4 = 0; i4 <= 8; i4++)
{
if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
{
for (i5 = 0; i5 <= 8; i5++)
{
if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
{
var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72);
var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]];
ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
}
}
}
}
}
Another attempt included:
function clickBox() //Get every cell by coordinate on the grid.
{
var xRectFill = 0;
var yRectFill = 0;
var rectFillArrayX = [];
var rectFillArrayY = [];
var mouseX = event.offsetX;
var mouseY = event.offsetY;
var lastLocation = [];
if (typeof lastLocation[0] !== 'undefined')
{
alert("Array is defined");
ctx.putImageData(imgData, lastLocation[0], lastLocation[1], 70);
}
for (i3 = 0; i3 <= 8; i3++)
{
rectFillArrayX[i3] = xRectFill;
rectFillArrayY[i3] = yRectFill;
xRectFill += 72;
yRectFill += 72;
}
for (i4 = 0; i4 <= 8; i4++)
{
if (mouseX >= rectFillArrayX[i4] && mouseX <= (rectFillArrayX[i4] + 72))
{
for (i5 = 0; i5 <= 8; i5++)
{
if (mouseY >= rectFillArrayY[i5] && mouseY <= (rectFillArrayY[i5] + 72))
{
var imgData = ctx.getImageData(rectFillArrayX[i4], rectFillArrayY[i4], 72, 72);
var lastLocation = [rectFillArrayX[i4], rectFillArrayY[i5]];
ctx.clearRect(rectFillArrayX[i4], rectFillArrayY[i5], 71, 71);
}
}
}
}
}