CODEWITHSUNDEEP
htmlcanvas
Dave
Dave

Reputation: 1

Canvas overlapping circles problem

A simple cut n paste and compare in FF & IE8 (in my case) will show my problem.

There are see 3 circles:

1 & 2 overlap ok in FF. 1 & 2 dont overlap ok in IE8. 3rd circle has a strange triangle thing happening in both browsers.

My question is how can i have 3 solid circles, that overlap?

<!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>

Upvotes: 0

Views: 1926

Answers (1)

Dale
Dale

Reputation: 141

Easy...

The three arcs are all part of a single path, close each arc with closePath() before starting the next.

var drawClouds = function(){
    var canvas = document.getElementById('theCanvas1');
    var context = canvas.getContext('2d');
    context.fillStyle = "#f90";
    context.arc(50, 50, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.arc(100, 50, 50, 0, Math.PI * 2, true);
    context.closePath();
    context.arc(200, 100, 50, 0, Math.PI * 2, true);
    context.fill();           
}

Upvotes: 4

Related Questions