Jump to content

Canvas Bordering


Recommended Posts

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!

Link to comment
Share on other sites

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>

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...