| <!DOCTYPE html> |
| <html> |
| <body> |
| <canvas id="canvas"></canvas> |
| <script> |
| 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); |
| }; |
| |
| 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> |
