stepheneb/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Canvas over SVG Bug: Part 2

See example.
source: gist.github.com/gists/1311230
6

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <title>Canvas over SVG Bug: Part 2</title>
  <style type="text/css">
    #chart { width:240px; height:240px; background-color: #f7f2c5; position: relative }
    #canvas1 { background-color: #f7f2c5; display: table-row-group }
    #description { margin: 0px 20px; width:580px }
    h1 { font-size: 1.2em; line-height: 1.2em; margin: 5px 5px 5px 60px;}
    circle { stroke: #ff0000; stroke-width: 4px; fill: #ffffff; fill-opacity: 0.2 }
    ul.vlist { margin: 5px; display: inline-table }
    ul.vlist li { margin: 5px; list-style-type: none }
    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 }
    canvas {
      image-rendering: optimizeSpeed !important;
      image-rendering: -moz-crisp-edges !important;
      image-rendering: -webkit-optimize-contrast !important;
      image-rendering: optimize-contrast !important;
      -ms-interpolation-mode: nearest-neighbor !important;
    }
  </style>
</head>
<div id="container">
  <h1 id="title">Canvas over SVG Bug</h1>
  <ul class="hlist">
    <li>
      <canvas id='canvas1' width="240", height="240"></canvas>
      <div id='chart'>
        <svg width="240" height="240">
          <g transform="translate(20,20)">
            <rect width="200" height="200" style="fill: #eeeeee; " pointer-events="all"></rect>
            <circle cx="100" cy="100" r="60"></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="http://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>Draw Into Canvas</b>
          button a blue line is drawn into the Canvas.        </p>
        <p>
          On FireFox 7.0.1, 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="http://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>
        <p>
          This is a WIP attempt to more fully replicate the bug by adding in more elements similar
          to the actual application. So far I have been unsuccessful and only the first part of
          the bug is exposed. The simpler version of the Canvas over SVG Bug is here:
          <a href="http://bl.ocks.org/1302790">http://bl.ocks.org/1302790</a>
        </p>
      </div>
    </li>
  </ul>
</div>
<script type="text/javascript">

  window.onload=function() {

    var plot, canvas, ctx1, ctx2;
    var chart = document.getElementById("chart");
    var canvas1 = document.getElementById("canvas1");

    function createHeatMap() {
      var ctx2 = canvas1.getContext('2d');
      ctx2.fillStyle = "rgb(0,0,0)";
      ctx2.globalCompositeOperation = "destination-atop";

      canvas1.style.width = canvas1.clientWidth + 'px';
      canvas1.style.height = canvas1.clientHeight + 'px';
      canvas1.width = 60;
      canvas1.height = 60;

      var imageData = ctx2.getImageData(0, 0, 60, 60);
      var data = imageData.data;
      var pix_index = 0;
      for (var y = 0; y < 60; y++) {
          ycols = y * 60;
          pix_index = ycols * 4;
          for (var x = 0; x < 60; x++) {
              data[pix_index]     = Math.floor(Math.random()*255);
              data[pix_index + 1] = Math.floor(Math.random()*255);
              data[pix_index + 2] = Math.floor(Math.random()*255);
              data[pix_index + 3] = 255;
              pix_index += 4;
          }
      };
      ctx2.putImageData(imageData, 0, 0);
    };

    createHeatMap();

    function createCanvas() {
      plot = {}
      plot.rect = chart.children[0].getElementsByTagName("rect")[0]
      plot.width = plot.rect.width['baseVal'].value
      plot.height = plot.rect.height['baseVal'].value
      plot.left = plot.rect.getCTM().e
      plot.top = plot.rect.getCTM().f
      canvas = document.createElement('canvas');
      chart.appendChild(canvas);
      canvas.style.position = 'absolute'
      canvas.width = plot.width - 20;
      canvas.height = plot.height - 20;
      canvas.style.left = plot.left + 10 + 'px'
      canvas.style.top = plot.top + 10 + 'px'
      ctx1 = canvas.getContext( '2d' );
      ctx1.globalCompositeOperation = "destination-atop";
      ctx1.lineWidth = 1;
      ctx1.fillStyle = "rgba(0,255,0, 0.1)";
      ctx1.fillRect(0, 0, canvas.width, canvas.height);
      canvas.style.border = 'solid 1px red'
      canvas.style.zIndex = 100
    };

    function drawInCanvas() {
      ctx1.strokeStyle = "rgba(0,24,255, 1.0)";
      ctx1.beginPath();
      ctx1.moveTo(10, 90);
      ctx1.lineTo(170, 90);
      ctx1.closePath();
      ctx1.stroke();
    };

    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>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Canvas over SVG Bug: Part 2</title>
	<style type="text/css">
	#chart { width:240px; height:240px; background-color: #f7f2c5; position: relative }
	#canvas1 { background-color: #f7f2c5; display: table-row-group }
	#description { margin: 0px 20px; width:580px }
	h1 { font-size: 1.2em; line-height: 1.2em; margin: 5px 5px 5px 60px;}
	circle { stroke: #ff0000; stroke-width: 4px; fill: #ffffff; fill-opacity: 0.2 }
	ul.vlist { margin: 5px; display: inline-table }
	ul.vlist li { margin: 5px; list-style-type: none }
	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 }
	canvas {
	image-rendering: optimizeSpeed !important;
	image-rendering: -moz-crisp-edges !important;
	image-rendering: -webkit-optimize-contrast !important;
	image-rendering: optimize-contrast !important;
	-ms-interpolation-mode: nearest-neighbor !important;
	}
	</style>
	</head>
	<div id="container">
	<h1 id="title">Canvas over SVG Bug</h1>
	<ul class="hlist">
	<li>
	<canvas id='canvas1' width="240", height="240"></canvas>
	<div id='chart'>
	<svg width="240" height="240">
	<g transform="translate(20,20)">
	<rect width="200" height="200" style="fill: #eeeeee; " pointer-events="all"></rect>
	<circle cx="100" cy="100" r="60"></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="http://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>Draw Into Canvas</b>
	button a blue line is drawn into the Canvas. </p>
	<p>
	On FireFox 7.0.1, 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="http://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>
	<p>
	This is a WIP attempt to more fully replicate the bug by adding in more elements similar
	to the actual application. So far I have been unsuccessful and only the first part of
	the bug is exposed. The simpler version of the Canvas over SVG Bug is here:
	<a href="http://bl.ocks.org/1302790">http://bl.ocks.org/1302790</a>
	</p>
	</div>
	</li>
	</ul>
	</div>
	<script type="text/javascript">

	window.onload=function() {

	var plot, canvas, ctx1, ctx2;
	var chart = document.getElementById("chart");
	var canvas1 = document.getElementById("canvas1");

	function createHeatMap() {
	var ctx2 = canvas1.getContext('2d');
	ctx2.fillStyle = "rgb(0,0,0)";
	ctx2.globalCompositeOperation = "destination-atop";

	canvas1.style.width = canvas1.clientWidth + 'px';
	canvas1.style.height = canvas1.clientHeight + 'px';
	canvas1.width = 60;
	canvas1.height = 60;

	var imageData = ctx2.getImageData(0, 0, 60, 60);
	var data = imageData.data;
	var pix_index = 0;
	for (var y = 0; y < 60; y++) {
	ycols = y * 60;
	pix_index = ycols * 4;
	for (var x = 0; x < 60; x++) {
	data[pix_index] = Math.floor(Math.random()*255);
	data[pix_index + 1] = Math.floor(Math.random()*255);
	data[pix_index + 2] = Math.floor(Math.random()*255);
	data[pix_index + 3] = 255;
	pix_index += 4;
	}
	};
	ctx2.putImageData(imageData, 0, 0);
	};

	createHeatMap();

	function createCanvas() {
	plot = {}
	plot.rect = chart.children[0].getElementsByTagName("rect")[0]
	plot.width = plot.rect.width['baseVal'].value
	plot.height = plot.rect.height['baseVal'].value
	plot.left = plot.rect.getCTM().e
	plot.top = plot.rect.getCTM().f
	canvas = document.createElement('canvas');
	chart.appendChild(canvas);
	canvas.style.position = 'absolute'
	canvas.width = plot.width - 20;
	canvas.height = plot.height - 20;
	canvas.style.left = plot.left + 10 + 'px'
	canvas.style.top = plot.top + 10 + 'px'
	ctx1 = canvas.getContext( '2d' );
	ctx1.globalCompositeOperation = "destination-atop";
	ctx1.lineWidth = 1;
	ctx1.fillStyle = "rgba(0,255,0, 0.1)";
	ctx1.fillRect(0, 0, canvas.width, canvas.height);
	canvas.style.border = 'solid 1px red'
	canvas.style.zIndex = 100
	};

	function drawInCanvas() {
	ctx1.strokeStyle = "rgba(0,24,255, 1.0)";
	ctx1.beginPath();
	ctx1.moveTo(10, 90);
	ctx1.lineTo(170, 90);
	ctx1.closePath();
	ctx1.stroke();
	};

	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>
No results found