Canvas display problem in IE

by **langer** » Sun Nov 21, 2010 6:19 pm

Using the <canvas> tag I am trying to create a cloud effect with a lot of overlapping circles.

The display is OK in FF, Opera, Chrome & Safari, but breaks in IE. See attached screenshot to see the problem.

I have included in my HTML the js file to allow <canvas> to display


Does anyone know the reason for this and if there is a solution?

Below is part of my HTML and part of my canvas js script

<canvas id="theCanvas2" width="2000" height="110"></canvas>

// JavaScript Document

function drawClouds() {

// Cloud group 2
var canvas=document.getElementById('theCanvas2');
var context=canvas.getContext('2d');

context.fillStyle="rgba(255, 255, 255, 1)";

context.shadowColor="rgba(16, 107, 148, 0.

";
context.shadowOffsetX=12;
context.shadowOffsetY=11;
context.shadowBlur=3;

context.arc(20,10,40,0,Math.PI*2, true);
context.arc(85,30,50,0,Math.PI*2, true);
context.arc(185,20,75,0,Math.PI*2, true);
context.arc(250,30,50,0,Math.PI*2, true);
context.arc(290,10,50,0,Math.PI*2, true);
context.arc(330,20,40,0,Math.PI*2, true);
context.arc(390,20,60,0,Math.PI*2, true);
context.arc(450,15,50,0,Math.PI*2, true);
context.arc(505,20,70,0,Math.PI*2, true);
context.arc(570,20,40,0,Math.PI*2, true);
context.arc(625,30,50,0,Math.PI*2, true);
context.arc(680,20,40,0,Math.PI*2, true);
context.arc(740,20,60,0,Math.PI*2, true);
context.arc(790,10,50,0,Math.PI*2, true);
context.arc(830,20,40,0,Math.PI*2, true);
context.arc(850,30,50,0,Math.PI*2, true);
context.arc(900,20,40,0,Math.PI*2, true);
context.arc(925,20,60,0,Math.PI*2, true);
context.arc(980,10,50,0,Math.PI*2, true);
context.arc(1020,20,40,0,Math.PI*2, true);
context.arc(1100,20,55,0,Math.PI*2, true);
context.arc(1150,10,40,0,Math.PI*2, true);
context.arc(1210,30,50,0,Math.PI*2, true);
context.arc(1260,10,50,0,Math.PI*2, true);
context.arc(1295,30,40,0,Math.PI*2, true);
context.arc(1350,10,40,0,Math.PI*2, true);
context.arc(1395,15,45,0,Math.PI*2, true);
context.arc(1465,30,50,0,Math.PI*2, true);
context.arc(1525,20,75,0,Math.PI*2, true);
context.arc(1570,30,50,0,Math.PI*2, true);
context.arc(1610,30,50,0,Math.PI*2, true);
context.arc(1630,10,50,0,Math.PI*2, true);
context.arc(1670,20,40,0,Math.PI*2, true);
context.arc(1725,20,60,0,Math.PI*2, true);
context.arc(1765,10,40,0,Math.PI*2, true);
context.arc(1805,10,50,0,Math.PI*2, true);
context.arc(1870,0,75,0,Math.PI*2, true);
context.arc(1900,30,50,0,Math.PI*2, true);
context.arc(1950,10,40,0,Math.PI*2, true);
context.arc(1985,0,80,0,Math.PI*2, true);

context.fill();
}

by **langer** » Sun Nov 21, 2010 8:00 pm

So after a bit more playing I have simplified the problem and found a new one.

If you cut n past the below html and compare in FF & IE8 (in my case) you can 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.

I think my question is now, how can i have 3 solid circles, that overlap?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas</title>



<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 sxtyle="border:20px solid #000" id="theCanvas1" width="1000" height="500"></canvas>
</div>
</body>
</html>

Canvas display problem in IE

Canvas display problem in IE

Who is online

Who is online