Member Avatar for Borsund

Hello! I have a specific idea for the proram, but I don't really understand how to make it. What I need:
Standard Window with Canvas which is divided in a 10x10 boxed field. When you move your mouse over one of these boxes, it must become red (each box is white). When you move your mouse to another box, it becomes red, but the previous becomes white again.

I know how to make Canvas and I can divide it into 10x10 field. But I don't know how to make these boxes change color. It would be great if you could post a code here and I will try to understand it. This task is simple, but somehow I don't quite get it.

  • 3 Contributors
  • 3 Replies
  • 99 Views
  • 2 Hours Discussion Span
  • Latest Post Latest Post by ddanbe

Dani AI

Generated

You already have the canvas and the 10x10 layout, so the simplest, most efficient route is a single mouse handler on the canvas that maps the pointer to a cell index and redraws only when that index changes. This avoids creating 100 DOM controls (as mentioned) and keeps event handling in one place (as hinted). The code below shows a minimal, robust approach that handles CSS scaling and clears the highlight when the pointer leaves.

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

<script>
const canvas = document.getElementById('grid');
const ctx = canvas.getContext('2d');
const cols = 10, rows = 10;
const cellW = canvas.width / cols;
const cellH = canvas.height / rows;
let last = {cx: -1, cy: -1};

function draw(highX, highY) {
  ctx.clearRect(0,0,canvas.width,canvas.height);
  for (let x = 0; x < cols; x++) {
    for (let y = 0; y < rows; y++) {
      ctx.fillStyle = (x === highX && y === highY) ? 'red' : 'white';
      ctx.fillRect(x*cellW, y*cellH, cellW, cellH);
      ctx.strokeStyle = '#ccc';
      ctx.strokeRect(x*cellW, y*cellH, cellW, cellH);
    }
  }
}

canvas.addEventListener('mousemove', function(e) {
  const rect = canvas.getBoundingClientRect();
  const scaleX = canvas.width / rect.width;
  const scaleY = canvas.height / rect.height;
  const x = (e.clientX - rect.left) * scaleX;
  const y = (e.clientY - rect.top) * scaleY;
  const cx = Math.floor(x / cellW);
  const cy = Math.floor(y / cellH);
  if (cx !== last.cx || cy !== last.cy) {
    last.cx = cx; last.cy = cy;
    draw(cx, cy);
  }
});

canvas.addEventListener('mouseleave', function() {
  last.cx = last.cy = -1;
  draw(-1, -1);
});

draw(-1, -1);
</script>

Notes and troubleshooting:

  • Use getBoundingClientRect() to handle page scroll and CSS scaling; the code maps client coordinates into canvas pixels.
  • Only redraw when the cell changes to avoid flicker and wasted CPU.
  • If you use CSS to scale the canvas, ensure the canvas high-DPI handling (set width/height attributes to CSS size * devicePixelRatio) for sharp rendering.
  • If accessibility or per-cell interaction is needed (keyboard focus, semantics), a DOM-based grid may be better despite extra complexity.

Recommended Answers

All 3 Replies

Member Avatar for tinstaafl

What code are you using?

Off hand I'd say look at the mouse enter event, and the IsMouseOver property.

Member Avatar for Borsund

Currently, none. I know about events. The main problem is that I can't understand properly how to differ these boxes on the field and how to manipulate them (recoloring them, at first). I try to understand it theoretically first, so that I will understand the mechanics of the code itself, not just copy it from somewhere.

Member Avatar for ddanbe

Are you using WPF or WinForm?
You could implement 100 TextBox, Button etc. and implement the MouseHover event.
There is a video lesson somewhere about it I will try to find it for you.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.