Canvas over SVG Bug Part 1

Canvas over SVG Bug (2015)

<!DOCTYPE html>
<html>
<head>
  <title>Canvas over SVG Bug</title>
  <style type="text/css">
    #chart { width:400px; height:360px; background-color: #f7f2c5; position: relative }
    #description { margin: 0px 20px; width:400px }
    h1 { font-size: 1.4em}
    circle { stroke: #ff0000; stroke-width: 4px; fill: #ffffff; fill-opacity: 0.2 }
    ul.hlist { margin: 5px }
    ul.hlist li { margin: 5px; display: inline-table; vertical-align: top; list-style-type: none }
    fieldset { margin: 0px 40px 10px 20px}
  </style>
</head>
<div id="container">
  <h1 id="title">Canvas over SVG Bug</h1>
  <ul class="hlist">
    <li>
      <div id='chart'>
        <svg width="380" height="340">
          <g transform="translate(40,20)">
            <rect width="300" height="300" style="fill: #eeeeee; " pointer-events="all"></rect>
            <circle cx="150" cy="150" r="80"></circle>
          </g>
        </svg>
      </div>
    </li>
    <li>
      <div id="description">
        <fieldset>
          <legend>Canvas Controller</legend>
          <label><button type="button" id="create-canvas">Create Canvas</button></label>
          <label><button type="button" id="draw-canvas">Draw Into Canvas</button></label>
        </fieldset>
        <p>
          This page exposed a <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=695959">
          Canvas-related bug in FireFox</a> and in 
          <a href="https://social.msdn.microsoft.com/Forums/en-US/iewebdevelopment/thread/9c1e01fb-2592-4f6f-a623-edcfb655e8e5">IE9</a>. 
          Initially there is a gray SVG document with a
          red circle. After clicking the <b>Create Canvas</b> button a Canvas object is created
          with a red border and a translucent green background. This Canvas object is layered
          above the SVG object and inset by 10px. When you then click the <b>Braw Into Canvas</b>
          button a blue line is drawn into the Canvas.
        </p>
        <p>
          On FireFox 7.0.1 and FireFox Nightly and IE9 when the ctx.stroke() function is called
          to complete the line the background of the canvas is erased and becomes transparent.
        </p>
        <p>
          This only replicates part of the problem described here:
          <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=695959">Canvas-related bug in FireFox</a>.
          When starting the model in this page <a href="https://stepheneb.github.com/avalanche2d-js/avalanche2d.html">
          Avalanche-JS Demo</a> no lines are drawn in the graph on the right while the model is running.
          This is the time that the Canvas object is being draw into.
        </p>
      </div>
    </li>
  </ul>
</div>
<script type="text/javascript">

window.onload=function() {

var plot, canvas, ctx;
    var chart = document.getElementById("chart");

var create_canvas = document.getElementById("create-canvas");
    var draw_canvas  =  document.getElementById("draw-canvas");
    
    function createCanvasButton () {
      createCanvas();
    };

create_canvas.onclick = createCanvasButton;

function drawCanvasButton () {
      drawInCanvas();
    };

draw_canvas.onclick = drawCanvasButton;
    
  };
</script>
</body>
</html>