Sprites above sprites or Canvas as HTML background

Question

I plan on using the coordinates of my sprites in a canvas to make a board game by making the canvas a background image.

Here is the 8x8 board's js code.

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";

c.fillRect(0,0,100,100);
c.fillRect(200,0,100,100);
c.fillRect(400,0,100,100);
c.fillRect(600,0,100,100);

c.fillRect(100,100,100,100);
c.fillRect(300,100,100,100);
c.fillRect(500,100,100,100);
c.fillRect(700,100,100,100);

c.fillRect(0,200,100,100);
c.fillRect(200,200,100,100);
c.fillRect(400,200,100,100);
c.fillRect(600,200,100,100);

c.fillRect(100,300,100,100);
c.fillRect(300,300,100,100);
c.fillRect(500,300,100,100);
c.fillRect(700,300,100,100);

c.fillRect(0,400,100,100);
c.fillRect(200,400,100,100);
c.fillRect(400,400,100,100);
c.fillRect(600,400,100,100);

c.fillRect(100,500,100,100);
c.fillRect(300,500,100,100);
c.fillRect(500,500,100,100);
c.fillRect(700,500,100,100);

c.fillRect(0,600,100,100);
c.fillRect(200,600,100,100);
c.fillRect(400,600,100,100);
c.fillRect(600,600,100,100);

c.fillRect(100,700,100,100);
c.fillRect(300,700,100,100);
c.fillRect(500,700,100,100);
c.fillRect(700,700,100,100);

Is there any way I can make this a background image of my html file so I can still use the same coordinates and make new sprites above it which I could manipulate with js also. Thanks!

Helder Sepulveda · Answer 1 · 2020-04-07T22:40:49.137

You can significantly reduce that ...
It is just a couple of loops and a condition

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.fillStyle = "#ffb933";

size = 20

for (i = 0; i < 8; i++) {
  for (j = 0; j < 8; j++) {
    if ((i + j) % 2 != 0)
      c.fillRect(i * size, j * size, size, size); 
  }
}

<canvas width=200 height=200>

If you are set on using an image an easy option is with an SVG image
I got this one from wikimedia:
https://upload.wikimedia.org/wikipedia/commons/7/70/Checkerboard_pattern.svg

function svgimage() {
  var image = `
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 5 5">
<rect width="5" height="5"/>
<path d="M0,0V5H1V0zM2,0V5H3V0zM4,0V5H5V0zM0,0H5V1H0zM0,2H5V3H0zM0,4H5V5H0z" fill="#fff" fill-rule="evenodd"/>
</svg>`;
  return encodeURIComponent(image);
}

function drawImage() {
  ctx.drawImage(img, 0, 0, 500, 500);
}

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.onload = drawImage
img.src = 'data:image/svg+xml;charset=utf-8,' + svgimage();

<canvas id=canvas width=500 height=500></canvas>

You can draw anything you like on top of that, here is an example:

var canvas = document.querySelector('canvas');
var c = canvas.getContext('2d');
c.globalAlpha = 0.5

function drawBoard() {
  c.beginPath()
  c.fillStyle = "#ffb933";
  size = 20
  for (i = 0; i < 8; i++) {
    for (j = 0; j < 8; j++) {
      if ((i + j) % 2 != 0)
        c.fillRect(i * size, j * size, size, size);
    }
  }
}

delta = 0
function draw() {
  c.clearRect(0, 0, canvas.width, canvas.height)
  drawBoard()
  delta += 0.05
  x = Math.sin(delta) * 40 + 80
  y = Math.cos(delta) * 20 + 60
  c.beginPath()
  c.fillStyle = "#ff0000";
  c.arc(x, y, 10, 0, 2 * Math.PI);
  c.fill()
}

setInterval(draw, 20);

<canvas width=200 height=200>

You can see I converted the double loop example into a function that we call every time we draw

Sprites above sprites or Canvas as HTML background

1 Answers1