Простая вырезка и вставка и сравнение в FF & IE8 (в моем случае) покажет мою проблему.
Есть 3 круга:
1 & 2 перекрываются нормально в FF.1 и 2 не перекрываются нормально в IE8.3-й круг имеет странную треугольную вещь, происходящую в обоих браузерах.
Мой вопрос: как я могу иметь 3 сплошных круга, которые перекрываются?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>
<!-- canvas fix for IE -->
<!--[if IE]><script type="text/javascript" src="scripts/excanvas.js"></script><![endif]-->
<!-- HTML5 fix for IE -->
<link href="css/suxperbo.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" >
function drawClouds() {
var canvas=document.getElementById('theCanvas1');
var context=canvas.getContext('2d');
context.fillStyle="#f90";
context.arc(50,50, 50,0,Math.PI*2, true);
context.arc(100,50, 50,0,Math.PI*2, true);
context.arc(200,100, 50,0,Math.PI*2, true);
context.fill();
}
</script>
</head>
<body onLoad="drawClouds()">
<div class="canvasHolder">
<canvas id="theCanvas1" width="1000" height="500"></canvas>
</div>
</body>
</html>