Jump to content

making pattern with squares - need transparant border


BartWilke

Recommended Posts

Hi all,

 

I'm trying to get a grid of black squares but need to make a border that is transparant so i can see the squares instead of just one big black square..

 

here is my code:

 

<script>
var can = document.getElementById('blokjes');
var ctx = can.getContext('2d');
var pattern = document.createElement('canvas');
pattern.width = 20;
pattern.height = 20;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(0, 0, 0)";
pctx.fillRect(0,0,10,10);
pctx.fillRect(10,10,10,10);
pctx.fillRect(0,10,10,10);
pctx.fillRect(10,0,10,10);
var pattern = ctx.createPattern(pattern, "repeat");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(500, 500);
ctx.lineTo(0, 500);
ctx.closePath();
ctx.fillStyle = pattern;
ctx.fill();
</script>
Link to comment
Share on other sites

Thanks for your help! ill have a look into that :)

 

as for now i managed to make it work just to move all square 1 px to the left and one down..

 

<script>
var can = document.getElementById('blokjes');
var ctx = can.getContext('2d');
var pattern = document.createElement('canvas');
pattern.width = 12;
pattern.height = 12;
var pctx = pattern.getContext('2d');
pctx.fillStyle = "rgb(0, 0, 0)";
pctx.fillRect(0,0,5,5);
pctx.fillRect(6,6,5,5);
pctx.fillRect(0,6,5,5);
pctx.fillRect(6,0,5,5);
var pattern = ctx.createPattern(pattern, "repeat");
ctx.beginPath();
ctx.moveTo(0, 0);
ctx.lineTo(500, 0);
ctx.lineTo(500, 500);
ctx.lineTo(0, 500);
ctx.closePath();
ctx.fillStyle = pattern;
ctx.fill();
</script>
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...