Forums » Help » Prevent shapes drawn on the canvas from moving with the screen?

Currently I have my impact game setup to adjust the screen coordinates when the player moves (i.e., follow-cam). Apparently trying to draw anything on the canvas actually draws it on the screen instead. For instance, inside my game's main.js draw method I have this:

draw: function() {
	this.parent();

	this.camera.draw();

	ig.system.context.fillRect(0,0,100,100);
}

This draws a blue-square in the top-left hand corner of the current screen x,y. If I was to change the screen position by moving the player entity, the blue square also moves relative to the screen.

How can I draw a stationary square directly to the canvas rather than the screen? I also tried using the getDrawPos method - didn't seem to do anything.

As far as I know,
ig.system.context.fillRect(0,0,100,100);
should always draw a rectangle to the same spot on the canvas.

You game "scrolling" should not affect it at all.

Joncom, I believe that's exactly what the OP doesn't want (from what I understand).

So basically you want your rectangle to scroll off of the screen as you move? I think you should be able to use ig.game.screen.x (and y) to get your rectangle to be drawn relative to your screen position.

Perhaps I can clarify by giving a bit more context as to what I'm trying to do. Basically, I'm trying to draw a box surrounding an enemy entities field of vision for debugging purposes.

Here's a simplified example (just ask if you want the full module):

EntityEnemy = ig.Entity.extend({
        
        viewRange: 100,


        draw: function() 
        {
            this.parent();

            ig.system.context.fillStyle = 'rgba(0,0,255,0.3)';
            ig.system.context.fillRect
            (
                this.pos.x,
                this.pos.y,
                this.viewRange,
                this.viewRange
            );
        },

 });

It doesn't quite draw the box where I want it to currently, but the bigger problem is that it doesn't get drawn relative to the Enemy entity. As with my earlier example moving the screen position also moves my little debug box.

Quote from Joncom
As far as I know,
ig.system.context.fillRect(0,0,100,100);
should always draw a rectangle to the same spot on the canvas.

You game "scrolling" should not affect it at all.

I want a stationary rectangle, by stationary I mean it never moves with the screen. My scrolling (or something else) is moving it along with the screen adjustments as if it was fixed on the screen (unless I'm misunderstanding you and you're saying that's exactly whats supposed to happen with fillRect). I have everything pushed onto a private Github repo, if somebody wants to take a look I can add them as a contributor.

Are you using scale? You'll need put that in the mix if you plan on doing drawing based of the position of an entity. Perhaps you can gain some understanding (and have an example) from this post:

http://impactjs.com/forums/help/how-to-place-mini-health-bars-on-enemies-level-editor-confusion

Quote from Graphikos
Are you using scale? You'll need put that in the mix if you plan on doing drawing based of the position of an entity. Perhaps you can gain some understanding (and have an example) from this post:

http://impactjs.com/forums/help/how-to-place-mini-health-bars-on-enemies-level-editor-confusion

Thanks, that seems to be the piece of the puzzle I was missing!