search

jonessieka / explorercanvas

Automatically exported from code.google.com/p/explorercanvas
Apache License 2.0
0 stars 0 forks source link

Does clip() work? #36

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
I used the example from Mozilla found here
https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html
but does not seem to work in IE.

<html>
  <head>
    <title>A canvas clip example</title>
    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
    <meta name="DC.publisher" content="Mozilla Developer Center,
http://developer.mozilla.org">
    <!--[if IE]><script type="text/javascript"
src="excanvas.js"></script><![endif]-->
    <script type="text/javascript" language="javascript">
    function draw2() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.translate(50,0);
        var img = new Image();
        img.onload = function() {
            ctx.drawImage(this, -180, -150, 400, 300);
        }
        img.src = 'images/sw.jpg';
        ctx.beginPath();
        ctx.quadraticCurveTo(100, 0, 50, 100);
        ctx.quadraticCurveTo(-100, 0, 50, 0);
        ctx.clip();
    }
      function draw() {
        var ctx = document.getElementById('canvas').getContext('2d');
        ctx.fillRect(0,0,150,150);
        ctx.translate(75,75);

        // Create a circular clipping path        
        ctx.beginPath();
        ctx.arc(0,0,60,0,Math.PI*2,true);
        ctx.clip();

        // draw background
        var lingrad = ctx.createLinearGradient(0,-75,0,75);
        lingrad.addColorStop(0, '#232256');
        lingrad.addColorStop(1, '#143778');

        ctx.fillStyle = lingrad;
        ctx.fillRect(-75,-75,150,150);

        // draw stars
        for (j=1;j<50;j++){
          ctx.save();
          ctx.fillStyle = '#fff';

ctx.translate(75-Math.floor(Math.random()*150),75-Math.floor(Math.random()*150))
;
          drawStar(ctx,Math.floor(Math.random()*4)+2);
          ctx.restore();
        }

      }
      function drawStar(ctx,r){
        ctx.save();
        ctx.beginPath()
        ctx.moveTo(r,0);
        for (i=0;i<9;i++){
          ctx.rotate(Math.PI/5);
          if(i%2 == 0) {
            ctx.lineTo((r/0.525731)*0.200811,0);
          } else {
            ctx.lineTo(r,0);
          }
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
      }
    </script>
    <style type="text/css">
      body { margin: 20px; font-family: arial,verdana,helvetica;
background: #fff;}
      h1 { font-size: 140%; font-weight:normal; color: #036; border-bottom:
1px solid #ccc; }
      canvas { border: 2px solid #000; float: left; margin-right: 20px;
margin-bottom: 20px; }
      pre { float:left; display:block; background: rgb(238,238,238);
border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0; }
    </style>
  </head>

  <body onload="draw();">
    <h1>A canvas <code>clip</code> example</h1>
    <div>
      <canvas id="canvas" width="150" height="150"></canvas>
    </div>
  </body>
</html>

Original issue reported on code.google.com by poweroft...@gmail.com on 10 Jun 2009 at 4:44

GoogleCodeExporter commented 9 years ago 
Hi,

Another example script for clipping that does not work :
---8<------8<------8<------8<------8<------8<------8<------8<------8<------8<---
var ctx = elem.getContext('2d');
var drawPath = function(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6)
{
    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.lineTo(x3, y3);
    ctx.lineTo(x4, y4);
    ctx.lineTo(x5, y5);
    ctx.lineTo(x6, y6);
    ctx.lineTo(x1, y1);
}
var drawTexture = function(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6, 
source, l,
t, w, h)
{
    var img = new Image();
    var onImageLoad = function()
    {
        ctx.save();
        ctx.beginPath();
        drawPath(x1, y1, x2, y2, x3, y3, x4, y4, x5, y5, x6, y6);
        ctx.clip();
        ctx.drawImage(img, l, t, w, h);
        ctx.restore();
    };
    img.onload = onImageLoad;
    img.src = source;
}
drawCase(283,314,326,314,348,353,326,392,283,392,261,353, '#00FE00',
'Images/Textures/grass_40.png', 261.5, 314, 87, 78);

---8<------8<------8<------8<------8<------8<------8<------8<------8<------8<---

An hexagon is filled using a backcolor, and a texture is drawn clipped in the 
same
hexagon.

Color filling is good, but clipping on image does not work : image left part is 
not
clipped, but right part is clipped.

Same code works fine in Firefox.

Original comment by maitred...@gmail.com on 14 Sep 2009 at 7:55

GoogleCodeExporter commented 9 years ago 
[deleted comment]
GoogleCodeExporter commented 9 years ago 
Screenshots :

Same code rendered on IE and FireFox.
Left image is generated server-side (asp.net C#)
Right image is Canvas. Magenta background is not drawn.

Original comment by maitred...@gmail.com on 14 Sep 2009 at 8:05

Attachments:

GoogleCodeExporter commented 9 years ago 
Hello, as already said in another issue report, the clip function does NOT work 
with IE 
+ ExCanvas, even with the latest revision. There are a few workarounds, but 
they don't 
really work.

Original comment by fabien.menager on 14 Sep 2009 at 8:43

GoogleCodeExporter commented 9 years ago 
Hi,

Thanks for your precision.

What about clipping implementation in silverlight excanvas ?

Is it still in a "TODO" stub, or someone has started working on it ?

Original comment by maitred...@gmail.com on 16 Sep 2009 at 8:00

GoogleCodeExporter commented 9 years ago 
For Silverlight clipping,
can someone say if this XAML code is correct :
<Canvas Width="300" Height="300" Clip="M108,200 L129,200 L139,221 L129,242 
L108,242
L97,221 z">
</Canvas>

So adding clipping show not be too hard : Elements are added to "current 
clipping
canvas".
Let think about a possible behavior :
- I draw elements -> drawn to root.
- I save context.
- I create a path (beginPath, move, line, line... close).
- I "clip" -> new clipping canvas is created.
- I draw elements -> rendered elements are children of "clipping canvas"
- I restore context.
- I draw elements -> drawn to root

Any feeling about this ?

Original comment by maitred...@gmail.com on 16 Sep 2009 at 1:30

GoogleCodeExporter commented 9 years ago 
This may work, if SL is better than VML (what I really hope). I wanted to use 
this kind 
of method for VML, and really thought it would work, but this doesn't :(
I cannot test it at the moment, but you could with a really minimal example, 
with a few 
shapes.

Original comment by fabien.menager on 16 Sep 2009 at 2:12

GoogleCodeExporter commented 9 years ago 
I have made a small try to add clipping to silverlight excanvas.
Seems to work well.

Here are the diff file and screenshot.
Left is Firefox 3.5, right is IE 8.

Left image is rendered server-side, right image is generated client-side 
(javascript
+ canvas).

Before this code, images would have corners out of their area.

Original comment by maitred...@gmail.com on 16 Sep 2009 at 3:44

Attachments:

GoogleCodeExporter commented 9 years ago 
Nice, maitredede.

Do you mind signing the CLA so I can apply your patch?

http://code.google.com/legal/individual-cla-v1.0.html

Original comment by erik.arv...@gmail.com on 19 Sep 2009 at 6:26

GoogleCodeExporter commented 9 years ago 
Excellent patch. I would also very much like that patch to be committed to 
Excanvas.

Original comment by andre...@pvv.ntnu.no on 26 Sep 2009 at 10:46

GoogleCodeExporter commented 9 years ago 
Would it be possible to use the similar logic for image clipping using 
drawImage()?

Original comment by andre...@pvv.ntnu.no on 26 Sep 2009 at 11:30

GoogleCodeExporter commented 9 years ago 
Hi,
My patch is made for silverlight version of excanvas. Clipping is done for each
elements drawn after the "clip" function, including images.
You can give it a try ;)

Original comment by maitred...@gmail.com on 27 Sep 2009 at 7:36

GoogleCodeExporter commented 9 years ago 
I've given it a try, and it works nicely. Would it be possible to get this 
patch 
ported to the VML version of excanvas, so that image clipping would work for 
more users?

Original comment by andre...@pvv.ntnu.no on 4 Oct 2009 at 9:58