BartWilke Posted October 7, 2014 Share Posted October 7, 2014 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 More sharing options...
justsomeguy Posted October 7, 2014 Share Posted October 7, 2014 The border is the stroke. This has examples of assigning transparent stroke and fill colors:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors Link to comment Share on other sites More sharing options...
BartWilke Posted October 7, 2014 Author Share Posted October 7, 2014 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 More sharing options...
BartWilke Posted October 7, 2014 Author Share Posted October 7, 2014 my next step is to make those 2 canvases overlap with the use of layers.. as I look into this solution, maybe there are some users here who can tell me what the best way is to do this Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now