Canvas Bordering

[Lomaz]

This really may be more of a CSS issue, but phaser may have a way of doing it, I'm not sure...  What I want is a 10px border around the canvas?  Easy enough right?

 

But it needs to be two things:

 

1: on the INSIDE of the canvas, not the outside

2: must not push content down and right.. needs to actually overlap the content hiding the edges.

 

The issue that is causing me to take this route is one of the things I'm doing looks really really ugly around the outside edges of the canvas, and I wanted to hide that.. to me that feels like the best option

 

The other option i may try is putting the canvas into a slightly smaller div, centered, and hide overflow. thus chopping off the outer edges of the canvas.

 

Any ideas on the best way to do this?

 

Thanks in advance!

[Miniversal]

I think your best option is adding a wrapper div that clips the edges of the canvas using CSS. 

 

.wrapper{ width:100px;overflow:hidden;max-width:100px;border:solid 10px #fff;}

canvas {width:90px;max-width:90px;}

 

<div class="wrapper"><canvas /></div>

[Lomaz]

Wrapper, and margin -10px did the trick! no more ugly!