Drewrg Posted December 14, 2016 Share Posted December 14, 2016 The Example. Hello every body. I have a Canvas with red background. On it I have rows of boxes, which go exactly after each other. Each box begins exactly where previous box ends, and they all have same skew. So there should not be any gap between edges, but as you can see in the example there are gaps. Does anybody knows why is this happening, and how to get rid of it. console.clear(); var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); var world = { centerY: canvas.height / 2, centerX: canvas.width / 2 } var rowCount = 14; var box = { width: 20, height: 20, skew: 10 } function drawBox(x, y, id) { ctx.save(); ctx.beginPath(); ctx.moveTo(x, y); ctx.lineTo(x + box.width, y); ctx.lineTo(x + box.width + box.skew, y - 20); ctx.lineTo(x + box.skew, y - box.height); ctx.lineTo(x, y); ctx.closePath(); ctx.clip(); ctx.clearRect(0,0, canvas.width, canvas.height); ctx.fillStyle = id % 2 == 0 ? 'lightgray' : 'darkgray'; ctx.fill(); ctx.restore(); } for (var i = 0; i < 112; i++) { var k = Math.floor(i / rowCount) * rowCount; console.log(k); drawBox(i * box.width - (k * box.width), Math.floor(i / rowCount) * box.height, i) } #canvas { background-color: red; width: 800px; height: 600px; } <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> </head> <body> <canvas id="canvas"> </canvas> </body> </html> Quote Link to comment Share on other sites More sharing options...
Fatalist Posted December 14, 2016 Share Posted December 14, 2016 The problem is fill(), which always draws with antialiasing. replace it with ctx.fillRect(0,0, canvas.width, canvas.height); It will only work in Chrome though, other browsers antialias the clip regions. Quote Link to comment Share on other sites More sharing options...
Drewrg Posted December 14, 2016 Author Share Posted December 14, 2016 45 minutes ago, Fatalist said: The problem is fill(), which always draws with antialiasing. replace it with ctx.fillRect(0,0, canvas.width, canvas.height); It will only work in Chrome though, other browsers antialias the clip regions. Actually there will be drawImage() instead of fill(), but drawImage() got the same issue, Is there any idea, what can replace drawImage(). Quote Link to comment Share on other sites More sharing options...
Fatalist Posted December 14, 2016 Share Posted December 14, 2016 You can set context.imageSmoothingEnabled = false; and use createPattern+fillRect instead of drawImage. Quote Link to comment Share on other sites More sharing options...
Drewrg Posted December 14, 2016 Author Share Posted December 14, 2016 I would like to, but createPattern will not work in my case, it has lack of properties. I can't position, or modify width and height of source image. Quote Link to comment Share on other sites More sharing options...
Fatalist Posted December 14, 2016 Share Posted December 14, 2016 5 minutes ago, Drewrg said: I can't position, or modify width and height of source image. You can do that with setTransform. But maybe you should just use pixi.js/webgl. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.