replace CanvasRenderingContext rectangles, shapes with svg images in browser Pacman game

Question

I'm trying to replace the pills in this browser game with svg images

https://codepen.io/hellokatili/pen/xwKRmo

At the top of the JS file, I entered the following (my approach is based on this answer):

var image = new Image()
img.src = "http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg";

There is a function called drawPills which draws the pills using CanvasRenderingContext rectangles. As I understand it, the image I want to replace these rectangles with needs to be loaded before I can use it, so I replace the call to drawPills() with the following:

    image.onload = function() {
      map.drawPills(ctx);

    }

Then in the drawPills() function, I replace the rectangles with the image:

      ctx.drawImage(image, i, j);

Here's what my completed version of drawPills looks like:

  function drawPills(ctx) { 

    if (++pillSize > 30) {
        pillSize = 0;
    }

    for (i = 0; i < height; i += 1) {
        for (j = 0; j < width; j += 1) {
            if (map[i][j] === Pacman.PILL) {
              ctx.drawImage(image, i, j);
              /*                     ctx.beginPath();

                ctx.fillStyle = "#000";
                ctx.fillRect((j * blockSize), (i * blockSize), 
                             blockSize, blockSize);

                ctx.fillStyle = "#FFF";
                ctx.arc((j * blockSize) + blockSize / 2,
                        (i * blockSize) + blockSize / 2,
                        Math.abs(5 - (pillSize/3)), 
                        0, 
                        Math.PI * 2, false); 
                ctx.fill();
                ctx.closePath();*/

            }
        }
    }

No svgs are loaded, however. Can anyone help me figure out what I'm doing wrong?

Hard to see what you really did with only this, can you include at least **your** full `drawPills`? Also note that this exact svg has no size defined, expect weird behaviors when using drawImage with it, and even complete failure on at least Firefox. See [this Q/A](https://stackoverflow.com/questions/34706891/canvas-draw-image-issue-on-firefox-works-well-in-chrome/34713521#34713521) about this issue. — Kaiido, Oct 23 '19 at 08:53
so first, *x* and *y* of *drawImage(source, x, y)* should be `j * blockSize` and `i * blockSize` respectively. — Kaiido, Oct 23 '19 at 09:06
@Kaiido Thanks, that makes sense. I'm still not seeing the svg being drawn at all though. — David J., Oct 23 '19 at 09:29
Your first line defines `image`, but in the second line you use `img.src`. I am assuming you should start with `var img = new Image()`. Also, the source of the image is not secure (`http`). At least in codepen, the image will not load. — vqf, Oct 25 '19 at 15:32
You should consider using a game engine: https://github.com/collections/javascript-game-engines — Helder Sepulveda, Oct 27 '19 at 03:16

score 2 · Answer 1 · answered Oct 31 '19 at 20:28

While the images do not seem to be in the correct places I got the image loaded. I added this to the top of your code:

function loadImage(url){
  let image = new Image()
  image.src = url
  return image;
}
var pill_img = loadImage("http://upload.wikimedia.org/wikipedia/commons/d/d2/Svg_example_square.svg")

And replaced the code in the for loop of drawPills with:

ctx.drawImage(pill_img, j * blockSize, i * blockSize, blockSize, blockSize)
//While you had the pills drawn to a different spot, this position got it closer than doing ctx.drawImage(pill_img, i * blockSize, j * blockSize, blockSize, blockSize)
//You can always shift it

This draws the image in the wrong places, but now we know it is loaded.

score 0 · Answer 2 · answered Oct 31 '19 at 15:11

You define variable image then you set the src to a variable called img.

Also, if you try to load that image on an https page, your request will be blocked because you can not load unsecure content in https pages. Try changing http with https in your image request.

replace CanvasRenderingContext rectangles, shapes with svg images in browser Pacman game

2 Answers2