39 lines
1014 B
HTML
39 lines
1014 B
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<style>
|
|
canvas, svg {
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
<body>
|
|
<canvas id="canvas"></canvas>
|
|
<script>
|
|
if (window.testRunner)
|
|
testRunner.waitUntilDone();
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
canvas.width = 150;
|
|
canvas.height = 150;
|
|
|
|
var context = canvas.getContext("2d");
|
|
context.strokeStyle = "green";
|
|
context.lineWidth = 50;
|
|
context.strokeRect(0,0,150,150);
|
|
|
|
var svgImage = new Image();
|
|
svgImage.onload = function() {
|
|
context.globalAlpha = 0.2;
|
|
context.drawImage(svgImage, 25, 25);
|
|
if (window.testRunner)
|
|
testRunner.notifyDone();
|
|
};
|
|
|
|
svgImage.src = "data:image/svg+xml, \
|
|
<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'> \
|
|
<rect width='100%' height='100%' style='fill:none;stroke:green;stroke-width:50%;'/> \
|
|
<rect x='25%' y='25%' width='50%' height='50%' fill='green' fill-opacity='0.2'/> \
|
|
</svg>";
|
|
</script>
|
|
</body>
|
|
</html>
|