How can I use and transform a canvas behind an svg mask in a cross-browser way? - html

Question

I've been doing a lot of research into Canvas and SVG, as well as CSS3 3d transforms, and I want to use them all together, and I'm having difficulty getting it all working. I've got an SVG element containing an image-based mask as well as a foreignObject element containing some HTML I'd like to mask, particularly, a canvas. Depending on what I do with the canvas, I'm getting different results in different browsers, and usually not what I want. Applying typical canvas operations, such as rect(), and applying typical css transformations, such as rotate3d(), will, in most browsers, cause the SVG image mask to no longer be applied to the canvas, and the entire canvas will be visible, including the masked part.
Safari (desktop): If the canvas has ever been drawn on or transformed in any way (even, for example, rotate3d(1,1,0,0deg)), it will not be masked.
Safari (iOS 7): If the canvas has ever been drawn on or transformed in any way, it will not be masked.
Chrome (desktop): Here, we can draw to the canvas and it will still be masked, but if it has been transformed, it will not be masked.
Chrome (iOS 7): If the canvas has been drawn on or transformed at all, it will not be masked.
Firefox: No problems here; it will still be masked even if it has been drawn on and transformed.
IE and others: I haven't checked yet.
You can see this illustrated by applying the following code, which is also hosted here, where I set up an example page: http://kage23.com/masktest.html
<svg width="748" height="421" baseProfile="full" version="1.2">
<defs>
<mask id="myMask" transform="scale(1)">
<image width="100%" height="421" xlink:href="http://i.imgur.com/ORtP2fW.png" />
</mask>
</defs>
<foreignObject id="foreignObject" width="100%" height="421">
<div style="background-color: green; width: 100%; height: 421px;">
<p id="myParagraph" style="padding-top: 100px; padding-left: 200px;">Some text or whatever.</p>
<canvas id="effectCanvas" width="500px" height="100px" style="background-color: red;"></canvas>
</div>
</foreignObject>
</svg>
<button onclick="applyMask()">Apply mask</button>
<button onClick="drawToCanvas()">Draw to canvas</button>
<button onClick="rotateCanvas()">Apply rotation to canvas</button>
<script>
var applyMask = function ()
{
var element = document.getElementById('foreignObject');
element.style.mask = 'url(#myMask)';
};
var drawToCanvas = function ()
{
var canvas = document.getElementById('effectCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
};
var rotateCanvas = function ()
{
var canvas = document.getElementById('effectCanvas');
canvas.style.webkitTransform = 'rotate3d(1,1,1,45deg)';
canvas.style.MozTransform = 'rotate3d(1,1,1,45deg)';
};
</script>
Is there a better way to do this? I'm not committed to using an SVG mask necessarily; I just need to be able to mask a transforming canvas that is also being actively drawn on. Originally, I was using -webkit-mask-box-image, but that's not supported very widely at all.