Skip to content

Instantly share code, notes, and snippets.

@stepheneb

stepheneb/README.md

Last active January 7, 2020 22:54
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save stepheneb/1311230 to your computer and use it in GitHub Desktop.
Save stepheneb/1311230 to your computer and use it in GitHub Desktop.
Download ZIP
Canvas over SVG Bug Part 2 (2015)
Raw
README.md
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment