I am trying to draw then erase rectangles on a gray canvas. I draw in red, then erase by drawing in gray. This works perfectly for fillRect() but not for strokeRect(). In the latter case, it acts like the opacity/alpha is not 1.0. This problem with strokeRect() is not fixed by explicitly use of css "opacity: 1.0;", or ctx.globalAlpha = 1.
Im including a stripped down version of the problem. Clicking on the drawFillRect buttons draw and "erase" a saturated opaque red filled rectangle. Clicking on the drawStrokeRect buttons draw semi-transparent rectangle outlines. Multiple clicks on the Red one make the outline redder and redder; multiple clicks on the Gray one make slowly fade the red outline to gray. I want it to behave like the filled case -- bright, opaque red outline, then cleared gray "erase".
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title></title>
<style>
canvas {background: Gray; opacity: 1.0;}
</style>
</head>
<body>
<canvas id="c" width="500" height="400"></canvas>
<div>
</div>
<div>
<button onclick="drawFillRect('Red')">drawFillRect('Red')</button>
<button onclick="drawFillRect('Gray')">drawFillRect('Gray')</button>
<button onclick="drawStrokeRect('Red')">drawStrokeRect('Red')</button>
<button onclick="drawStrokeRect('Gray')">drawStrokeRect('Gray')</button>
</div>
<script>
var ce = document.getElementById("c");
var ctx = ce.getContext('2d');
ctx.globalAlpha = 1.0;
function drawFillRect(color){ // GOOD: behaves like Alpha = 1.0
ctx.fillStyle = color;
ctx.fillRect(100,100,300,200);
}
function drawStrokeRect(color){ // BAD: behaves like Alpha = ~.5
ctx.strokeStyle = color;
ctx.strokeRect(100,100,300,200);
}
</script>
</body>
</html>G