A bunch of questions

[DaAwesomeRazor]

Question 1: How would I add borders?

Question 2: How could I change the way pellets and viruses look(ex, making viruses not spikey, or change the size of the pellets)

Question 3: How could I change the picture of the background? SO it says A1 A2 A3 A4. I can either change the picture or draw it using canvas. I think I should just change the picture though. Much easier

[xzfc]

Question 1: How would I add borders?

var ctx = document.getElementById("canvas").getContext("2d")
window.agar.hooks.beforeDraw = function() { /* place code that draw borders on canvas using `ctx` here */ }

Coordinates of world borders is located inside window.agar.dimensions array. You don't need to transform coordinates from screen coordinates to world ones; so that means if you draw, for example, circle in coordinates {x:0,y:0}, then it will be drawn right in centre of the map.

Question 2: How could I change the way pellets and viruses look(ex, making viruses not spikey, or change the size of the pellets)

making viruses not spikey

You can enable this feature globally, not per-cell: window.agar.simpleCellDraw = true;

change the size of the pellets

One way is to define hook that runs just before drawing each cell. For example, cellColor.

window.agar.hooks.cellColor = function(cell) {
    if (cell.size < 16 && cell.name == "") /* An hacky way to check if the cell is pellet */
        cell.size = 32 /* An hacky way to make agar draw larger pellets. It seems to work but there maybe side-effects */
}

Another way is draw anything atop using canvas:

window.agar.hooks.afterCellStroke = function(cell) {
    /* Place your code that draws something over the cell using `ctx` */
}

Question 3: How could I change the picture of the background? SO it says A1 A2 A3 A4. I can either change the picture or draw it using canvas. I think I should just change the picture though. Much easier

You mean something like grid with coordinates? If so, draw it in same way as borders.

[DaAwesomeRazor]

@xzfc ok Tried the border thing and it worked !!! Thanks so much.

window.agar.simpleCellDraw = true does not do anthing

I have not tried anything for drawing over a cell though

[DaAwesomeRazor]

@xzfc does not work var ctx = document.getElementById("canvas").getContext("2d") window.agar.hooks.afterCellStroke = function(cell) { ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); }