How to remove the gap between filling and filling on HTML5 canvas?

Question

I am concerned about the existing space between one filling and another filling in HTML. Each fill fits on their side. I expect you to fill in exactly the line, but there is a space.

this is an example code:

var canvas = document.createElement("canvas"); canvas.width = 120; canvas.height = 300; document.body.appendChild(canvas); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#fff"; ctx.fillRect(0, 0, 120, 300); ctx.fillStyle = "#000"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill(); ctx.fillStyle = "#000"; ctx.beginPath(); ctx.moveTo(120, 300); ctx.lineTo(0, 0); ctx.lineTo(120, 0); ctx.fill(); 

You can see the white line (space) between the black triangles. In fact, triangle points are created by the auto-generated program for Flash, and Flash can display triangles without space, but HTML5 cannot. Does anyone have an idea what to erase this line?

Answer 1

You can add strokes to triangles by adding the following:

 ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); 

Example: http://jsfiddle.net/wxh4R/

 // your Triangle ctx.fillStyle = "#000"; ctx.beginPath(); ctx.moveTo(0, 0); ctx.lineTo(0, 300); ctx.lineTo(120, 300); ctx.fill(); // Stoke ctx.lineWidth = 1; ctx.strokeStyle = "#000"; ctx.closePath(); ctx.stroke(); 

Answer 2

You may need to add 0.5 to some coordinates because the screen pixel is not 0, but between 0 and 1. For more information, see the “Ask Markup Professors” section at http://diveintohtml5.ep.io/canvas.html#paths

Answer 3

Convert your drawings to bitmap images.