Certain sprites not being rendered correctly when using Canvas.

[Broojo]

Call me crazy but I am attempting to create an RTS game using Phaser. One aspect I have finished to a reasonable level is the drawing of a rectangle to select units on the screen, like Age of Empires. The code works fine when using WebGL but for some reason when using the Canvas the lines of the rectangle are invisible but can be seen over the sprites they are drawn on top of as shown below:

 

 

This is what it looks like in WebGL (more vibrant colours as well):

 

This may be because the texture used for the selection box is 1x1 in size, however I just added another 1x1 sprite and it displayed just fine. (There are other sprites in the game such as units and the GUI).

 

I use 4 sprites to draw the selection rectangle, I previously used shapes in the render() method but that should really just be used for debug purposes right? Plus, this method works well when drawing rectangles backwards. Another sprite is drawn on top of the rectangle to use for collision with units.

 

In terms of the code, just for the selection box and grass underneath the following is used:

function preload() {    game.load.image('grass', 'assets/grass.png');    game.load.image('blackPixel', 'assets/blackPixel.png');}function create() {    // Create the grass    grass = game.add.tileSprite(0, 0, 1280, 800, 'grass');    grass.inputEnabled = true;    grass.events.onInputUp.add(selectionUp, this);    grass.events.onInputDown.add(selectionDown, this);    // Create sprite for each side of selection box    selectionLeft = game.add.sprite(0, 0, 'blackPixel');    selectionRight = game.add.sprite(0, 0, 'blackPixel');    selectionTop = game.add.sprite(0, 0, 'blackPixel');    selectionBottom = game.add.sprite(0, 0, 'blackPixel');    // Make selection box invisible    selectionLeft.visible = false;    selectionRight.visible = false;    selectionTop.visible = false;    selectionBottom.visible = false;    // Set the selection lines width    selectionLeft.width = 2;    selectionRight.width = 2;    selectionTop.height = 2;    selectionBottom.height = 2;}function update() {    // Update the size and position of the selection    // only if it is visible. Only change the position     // of the Right and Bottom lines.    if (selectionLeft.visible === true) {        selectionLeft.height = game.input.mousePointer.worldY - selectionLeft.y;        selectionRight.height = selectionLeft.height;        selectionTop.width = game.input.mousePointer.worldX - selectionLeft.x;        selectionBottom.width = selectionTop.width;        selectionRight.x = selectionLeft.x + selectionTop.width;        selectionRight.y = selectionLeft.y;        selectionBottom.x = selectionLeft.x;        selectionBottom.y = selectionLeft.y + selectionLeft.height;    }    // Update the size and position of the sprite corresponding to    // the rectangular selection    selectionSprite.width = selectionTop.width;    selectionSprite.height = selectionLeft.height;    selectionSprite.x = selectionLeft.x;    selectionSprite.y = selectionLeft.y;}function selectionDown () {    // Make selection rectangle visible    selectionLeft.visible = true;    selectionRight.visible = true;    selectionTop.visible = true;    selectionBottom.visible = true;    // If started selecting units, set top left coords.    if (selectionStarted === false) {        selectionLeft.x = game.input.mousePointer.worldX;        selectionLeft.y = game.input.mousePointer.worldY;        selectionTop.x = game.input.mousePointer.worldX;        selectionTop.y = game.input.mousePointer.worldY;        selectionStarted = true;    }}function selectionUp() {// Make the selection lines invisible    selectionLeft.visible = false;    selectionRight.visible = false;    selectionTop.visible = false;    selectionBottom.visible = false;    // Reset the selection position so it won't be intersected again    selectionLeft.x = 0;    selectionLeft.y = 0;    selectionRight.x = 0;    selectionRight.y = 0;    selectionTop.x = 0;    selectionTop.y = 0;    selectionBottom.x = 0;    selectionBottom.y = 0;    // Make the width 2, because of reasons    selectionLeft.width = 2;    selectionLeft.height = 2;    selectionRight.width = 2;    selectionRight.height = 2;    selectionTop.width = 2;    selectionTop.height = 2;    selectionBottom.width = 2;    selectionBottom.height = 2;}

If this code is not enough, the entire code for the "game" can be found here: http://pastebin.com/Fsr1CXEU

 

Feel free to laugh at/critique the code, it's just boilerplate really at the moment, no other javascript files or anything.

[rich]

I think the issue is your 1x1 pixel texture and the way canvas anti-aliases images by default when drawing them.

 

You could try this:

selectionLeft.smoothed = false;

(and repeat on the other lines)

 

But if that doesn't work try using a better / bigger texture.

[Broojo]

Thanks for the response   I Changed the sprite size to 32x32 and now it works fine.