3

I'm bothered by existing space between one fill and another fill on HTML. Each fill is fitting on their aslant side. I'm expecting to fill exactly the line, but there is space.

this is sample 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 (white space) between black triangles. Actually, the triangle's points are made by an auto-generating program for Flash, and Flash can show the triangles without space but HTML5 can not. Does anyone have an idea that erase that line?

tkihira
  • 31
  • 2

3 Answers3

3

You could add strokes to the triangles by adding this:

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();
Floern
  • 33,559
  • 24
  • 104
  • 119
  • It looks very good, but there are some bad cases. For example, fillStyle is using gradient fill or bitmap fill. Any ideas? – tkihira Jul 26 '11 at 14:41
  • For that cases you could draw the object three times: one at original position, one shifted by ~0.8px in x-direction and one shifted by ~0.8px in y-direction... – Floern Jul 26 '11 at 16:24
  • imagine if fillStyle has alpha value, but I think your idea is very good! – tkihira Jul 27 '11 at 04:32
1

You might have to add 0.5 to some off you coordinates since a screen pixel is not at 0 but between 0 and 1. For more information see the "Ask Professor Markup" at http://diveintohtml5.ep.io/canvas.html#paths

DanBeale
  • 310
  • 4
  • 15
Rickard
  • 678
  • 5
  • 14
  • I wonder which side I have to add. The points of the shape are auto-generated, so it is very difficult to determine that I should add 0.5 or sub 0.5 – tkihira Jul 26 '11 at 14:44
0

Convert your drawings to Bitmaps.

Aaron
  • 1
  • 1
    Hi, welcome to stackoverflow. Your answer will be more helpful, if at all, if you add some example code and/or useful links. [Read this](https://stackoverflow.com/help/how-to-answer). – kamyl Sep 23 '17 at 08:24