These forums are currently read-only due to receiving more spam than actual discussion. Sorry.

It is currently Sat Dec 02, 2017 4:21 pm Advanced search

Canvas display problem in IE

Here you can discuss things related to HTML and the Web in general that do not fit in to other categories.

Canvas display problem in IE

Postby 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. Image

I have included in my HTML the js file to allow <canvas> to display
<!--[if IE]><script type="text/javascript" src="scripts/excanvas.js"></script><![endif]-->

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.8)";
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();
}
langer
<h6>
 
Posts: 2
Joined: Sun Nov 21, 2010 12:58 pm

Postby 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>
<!-- 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 sxtyle="border:20px solid #000" id="theCanvas1" width="1000" height="500"></canvas>
</div>
</body>
</html>
langer
<h6>
 
Posts: 2
Joined: Sun Nov 21, 2010 12:58 pm


Return to General Discussion

Who is online

Users browsing this forum: No registered users and 0 guests