See example.
source: gist.github.com/gists/1302790
Last active
January 7, 2020 23:33
-
-
Save stepheneb/1302790 to your computer and use it in GitHub Desktop.
Canvas over SVG Bug Part 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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="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>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="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> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| <script type="text/javascript"> | |
| window.onload=function() { | |
| var plot, canvas, ctx; | |
| var chart = document.getElementById("chart"); | |
| 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' | |
| ctx = canvas.getContext( '2d' ); | |
| ctx.globalCompositeOperation = "destination-atop"; | |
| ctx.lineWidth = 1; | |
| ctx.fillStyle = "rgba(0,255,0, 0.1)"; | |
| ctx.fillRect(0, 0, canvas.width, canvas.height); | |
| canvas.style.border = 'solid 1px red' | |
| canvas.style.zIndex = 100 | |
| }; | |
| function drawInCanvas() { | |
| ctx.strokeStyle = "rgba(0,24,255, 1.0)"; | |
| ctx.beginPath(); | |
| ctx.moveTo(20, 150); | |
| ctx.lineTo(260, 150); | |
| ctx.closePath(); | |
| ctx.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