CODEWITHSUNDEEP
javascriptcanvasinternet-explorer-8html5-canvas
Lodder
Lodder

Reputation: 19743

Canvas error in IE8

I've have canvas which renders 2 circles (a Venn Diagram to be specific).

The canvas must support IE8 so as a fallback, I included Excanvas.js and HTML5shiv, however I'm getting the error>

Object doesn't support this property or method on on line 21

The line of code which belong on line 21 is:

var ctx = canvas.getContext("2d");

This is my first time working with a canvas so I'm rather clueless as to why it isn't working as I know there are ways of getting it to work in IE8.

Here is a SOFiddle:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width" />

  <!--[if IE]>
	<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.js"></script>
	<script src="//cdn.jsdelivr.net/excanvas/r3/excanvas.js"></script>
  <![endif]-->
</head>
<body>

  <canvas id="canvas" width="260" height="140"></canvas>

  <script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    var canvas1 = document.createElement("canvas");
    var ctx1 = canvas1.getContext("2d");

    // Calculate the circle positions
    var rawPercentage = '25%';
    var percentage = rawPercentage.replace('%', '');

    var calculateWhiteX = ((percentage / 100) * 65) + 65;
    var calculateGreyX = 196 - ((percentage / 100) * 65);


    var circleWhite = {
      x: calculateWhiteX, // top/bottom
      y: 65, // left/right
      r: 64 // radius/size
    };
    var circleGrey = {
      x: calculateGreyX, // top/bottom
      y: 65, // left/right
      r: 64 // radius/size
    };

    var grey = '#e8e9e9';
    var white = '#FFFFFF';
    var blue = '#1f4e80';

    drawCircle(ctx, circleGrey, grey);
    drawCircle(ctx, circleWhite, white);

    function drawIntersect(a, b, c, notC, color) {

      ctx1.clearRect(0, 0, canvas1.width, canvas1.height);

      ctx1.save();

      // a
      drawCircle(ctx1, a, color);
      // b
      ctx1.globalCompositeOperation = "source-in";
      drawCircle(ctx1, b, color);
      // c
      if (c) {
        drawCircle(ctx1, c, color);
      }
      // notC
      ctx1.globalCompositeOperation = "destination-out";
      if (notC) {
        drawCircle(ctx1, notC, color);
      }

      ctx1.restore();
      ctx.drawImage(canvas1, 0, 0);
    }

    function drawCircle(ctx, circle, color) {
      ctx.beginPath();
      ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI * 2);
      ctx.closePath();
      ctx.fillStyle = color;
      ctx.fill();
      genStroke();
    }

    function genStroke() {
      ctx.lineWidth = 1;
      ctx.strokeStyle = '#d2d2d2';
      ctx.stroke();
    }

    function drawVenn() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      drawCircle(ctx, circleGrey, grey);
      drawCircle(ctx, circleWhite, white);
      drawIntersect(circleWhite, circleGrey, null, null, blue);
    }

    drawVenn();
  </script>

</body>
</html>

Can anyone shed some light and possibly point me in the right direction?

Upvotes: 0

Views: 340

Answers (1)

markE
markE

Reputation: 105035

You might consider workarounds for IE<9 like:

  • Although statistics vary, IE<9 market share is small...less than 2% according to: http://www.w3schools.com/browsers/browsers_explorer.asp). . Tell your employer politely but firmly that efforts to support outdated browsers with tiny market share is not worth that effort. Consider this a public service to the programming community you're part of. Microsoft itself is not keeping IE<9 alive so efforts to shim IE<9 cause all of us programmers to be held back from useful programming.

  • Provide static pages and inform the user that they will have a better experience if they upgrade to a modern browser.

  • Create your Venn diagrams on the server using a "headless browser" and serve them to your page as an image. PhantomJS is a good headless browser: http://phantomjs.org/

  • Use SVG instead of html Canvas as your display element. SVG has drawing commands that mirror the canvas drawing commands. Microsoft included semi-support for SVG in IE8 with their VML drawing commands. RaphaelJS is library which lets you code using SVG drawing commands and it automatically outputs VML on IE<9: http://raphaeljs.com/

Upvotes: 1

Related Questions