HTML5 canvas-控制在同一位置绘制时会发生什么

Question

How can i control what happens when i draw a line in the same coordinates as previous line? Currently the color becomes brighter, but i want it to stay the same (or more accurately - i want the second line to on top of the first line).

I tried to do:

_context.setGlobalCompositeOperation(Composite.SOURCE_OVER);

But it seems to work only when drawing canvas on canvas, not when drawing on the same canvas.

Answer 1

Supposing your color has a full alpha, your problem is probably related to the fact you draw lines of width 1 at integer coordinates.

Look at the following fiddle : http://jsfiddle.net/RAgak/

Drawing at integer coordinates makes the line wider and fuzzy. And drawing a second time makes it brighter. But this doesn't happen when I draw the line at half-integer coordinates.

var y = 10;
c.beginPath();
c.moveTo(0, y);
c.lineTo(30, y);
c.stroke(); // fuzzy
c.beginPath();
c.moveTo(50, y+0.5);
c.lineTo(80, y+0.5);
c.stroke(); // ok

This is due to the fact lines are drawn over all pixels they're over (on canvas positionning is in float). When you want to draw precise vertical or horizontal lines in javascript on a canvas, you'd better have them in half ints.

See illustration : The first horizontal line was drawn with ay position of 1. This line is fuzzy and wide. The second horizontal line was drawn with ay position of 4.5. It is thin and precise.

The solution, at least when drawing horizontal or vertical lines (or rects), is to take the width of the line into account and draw at integer or half-integer coordinates.