<canvas> Go / Baduk / Weiqi Game Board

Question

I'm experimenting a little with the new tag and I already hit my first road album. I thought that I would start getting wet feet by implementing the version of the classic board game Go / Baduk / Weiqi.

I drew an xy grid using moveTo () and lineTo (), and I drew a background using fillRect (), which of course should be “below” this XY grid.

However, this is my problem. The fillRect () background is drawn on top of the grid - thus, obscuring the grid.

How do I cancel this? Here is what I work with:

var boardSize = 19; var gridSpacing = 25; var gridSize = boardSize * gridSpacing; var xStart = (window.innerWidth / 2) - (gridSize / 2) + 0.5; var yStart = (window.innerHeight / 2) - (gridSize / 2) + 0.5; var xEnd = xStart + gridSize; var yEnd = yStart + gridSize; var gridContext = canvas.getContext("2d"); gridContext.beginPath(); // Draw the board x lines for (var x = xStart; x <= xEnd; x += gridSpacing) { gridContext.moveTo(x, yStart); gridContext.lineTo(x, yEnd); } // Draw the board y lines for (var y = yStart; y <= yEnd; y += gridSpacing) { gridContext.moveTo(xStart, y); gridContext.lineTo(xEnd, y); } gridContext.strokeStyle = "#000000"; gridContext.stroke(); // Create new image object to use as pattern var img = new Image(); img.src = 'bg_wood.jpg'; img.onload = function() { var boardBG = gridContext.createPattern(img, 'repeat'); gridContext.fillStyle = boardBG; gridContext.fillRect(xStart, yStart, gridSize, gridSize); } 

Answer 1

Try using gridContext.globalCompositeOperation = 'destination-over'; when drawing the background.