Databases
StackOverflow2013
Postsdbo
POIE7 excanvas drawImage workaround?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIE7 excanvas drawImage workaround?
    text
    copied!<p>Ahoy StackOverflow!</p> <p>I've run into the following problem: on IE7 only, if I call drawImage() after drawing anything to the canvas, excanvas does not draw the image at the desired x,y coordinates. I have looked on the excanvas project page/ google group, and found that there are known issues with the drawImage() function. ( for example: <a href="http://code.google.com/p/explorercanvas/issues/detail?id=104&amp;q=IE7" rel="nofollow noreferrer">http://code.google.com/p/explorercanvas/issues/detail?id=104&amp;q=IE7</a> )</p> <p>I have tried restoring the identity matrix, as suggested here: <a href="https://stackoverflow.com/questions/8112496/excanvas-vml-positioning-issue">Excanvas vml positioning issue</a> , though it appears to have had no effect.</p> <p>Attached is a simple html document demonstrating this issue:</p> <pre><code>&lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="excanvas.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; window.onload = function(){ var icon, ctx; icon = new Image(); icon.width = "20"; icon.height = "20"; icon.src = "http://www.shangalulu.com/resources/images/icons/small/30.png"; icon.onload = function(){ var ctx; ctx = document.getElementById('the_canvas').getContext('2d'); ctx.beginPath(); ctx.moveTo(0,0); ctx.lineTo(500,0); ctx.lineTo(500,500); ctx.lineTo(0,500); ctx.lineTo(0,0); ctx.moveTo(200,200); ctx.lineTo(300,200); ctx.lineTo(300,300); ctx.lineTo(200,300); ctx.lineTo(200,200); ctx.moveTo(0,0); ctx.lineTo(500,500); ctx.moveTo(0,500); ctx.lineTo(500,0); ctx.stroke(); ctx.drawImage(icon, 190, 190, 20, 20); ctx.drawImage(icon, 240, 240, 20, 20); ctx.drawImage(icon, 290, 290, 20, 20); return; } } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;canvas id="the_canvas" width="500" height="500"&gt;&lt;/canvas&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>If you need the excanvas library to run this, you can grab it from here: <a href="http://code.google.com/p/explorercanvas/" rel="nofollow noreferrer">http://code.google.com/p/explorercanvas/</a></p> <p>The above script should do the following:</p> <ol> <li>it should draw an outline of the outer edges of the canvas (so you can see it)</li> <li>it should draw a 100x100 rectangle in the middle of the canvas.</li> <li>it should draw two lines that cross through the center of the canvas.</li> <li>it should draw three images: one on the top left corner of the inner box, one at the center, and one on the bottom right corner of the inner box.</li> </ol> <p>What I would like to know is: Is there a known patch/workaround to this problem?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload