<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - Drawing an <img> with an SVG source into a <canvas> has incorrect rendering if the SVG viewBox does not match the <img> metrics"
href="https://bugs.webkit.org/show_bug.cgi?id=159340">159340</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>Drawing an <img> with an SVG source into a <canvas> has incorrect rendering if the SVG viewBox does not match the <img> metrics
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>WebKit Nightly Build
</td>
</tr>
<tr>
<th>Hardware</th>
<td>All
</td>
</tr>
<tr>
<th>OS</th>
<td>All
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>SVG
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>graouts@webkit.org
</td>
</tr>
<tr>
<th>CC</th>
<td>webkit-bug-importer@group.apple.com, zimmermann@kde.org
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=282532" name="attach_282532" title="Testcase">attachment 282532</a> <a href="attachment.cgi?id=282532&action=edit" title="Testcase">[details]</a></span>
Testcase
See the attached testcase. In it we have an SVG image which has viewBox="0 0 200 200" and a <circle> with its top left corner located at 40,40 and sized to be 120x120. That SVG image is set as the src of an <img> element which is sized to be 100x100 by calling new Image(100, 100). Then we draw the <img> into a <canvas> sized to be 200x200 with a call to drawImage(image, 20, 20, 60, 60, 0, 0, width, height). Since the SVG image is scaled to be 0.5x its intrinsic size, drawing from a source of 20,20 and 60x60 should be a perfect match for the circle metrics but the output doesn't match, except very rarely when the image draws correctly.
Chrome behaves the same as us and Firefox draws black only.
There was a recent source change to improve this with <a class="bz_bug_link
bz_status_RESOLVED bz_closed"
title="RESOLVED FIXED - Drawing an SVG image into a <canvas> that is not in the DOM draws the wrong region"
href="show_bug.cgi?id=159276">https://bugs.webkit.org/show_bug.cgi?id=159276</a>, but it seems it doesn't quite cover all cases.</pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>