search

JonazMartinez / explorercanvas

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

globalCompositeOperation support #10

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 

Introduce globalCompositeOperation support:

http://developer.mozilla.org/en/docs/Canvas_tutorial:Compositing

Is there a reason why this is not part of excanvas yet?

Original report:

https://sourceforge.net/tracker2/?
func=detail&aid=1545995&group_id=163391&atid=827563

Original issue reported on code.google.com by erik.arv...@gmail.com on 2 Mar 2009 at 12:34

GoogleCodeExporter commented 9 years ago

Original comment by erik.arv...@gmail.com on 22 Mar 2009 at 12:33

GoogleCodeExporter commented 9 years ago 
From

https://sourceforge.net/tracker2/?func=detail&aid=1729628&group_id=163391&atid=8
27560

<html>
<head>
<title>A canvas globalCompositeOperation example</title>
<!--[if IE]><script type="text/javascript"
src="excanvas.js"></script><![endif]-->
<script>
var compositeTypes = [
'source-over','source-in','source-out','source-atop',

'destination-over','destination-in','destination-out','destination-atop',
'lighter','darker','copy','xor'
];
function draw(){
for (i=0;i<compositeTypes.length;i++){
var label = document.createTextNode(compositeTypes[i]);
document.getElementById('lab'+i).appendChild(label);
var ctx = document.getElementById('tut'+i).getContext('2d');

// draw rectangle
ctx.fillStyle = "#09f";
ctx.fillRect(15,15,70,70);

// set composite property
ctx.globalCompositeOperation = compositeTypes[i];

// draw circle
ctx.fillStyle = "#f30";
ctx.beginPath();
ctx.arc(75,75,35,0,Math.PI*2,true);
ctx.fill();
}
}
</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; margin-bottom: 5px; }
td { padding: 7px; }
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>globalCompositeOperation</code> example</h1>
<div>
<table>
<tr>
<td><canvas id="tut0" width="125"
height="125"></canvas><br/><label id="lab0"></label></td>
<td><canvas id="tut1" width="125"
height="125"></canvas><br/><label id="lab1"></label></td>

<td><canvas id="tut2" width="125"
height="125"></canvas><br/><label id="lab2"></label></td>
<td><canvas id="tut3" width="125"
height="125"></canvas><br/><label id="lab3"></label></td>
</tr>
<tr>
<td><canvas id="tut4" width="125"
height="125"></canvas><br/><label id="lab4"></label></td>
<td><canvas id="tut5" width="125"
height="125"></canvas><br/><label id="lab5"></label></td>
<td><canvas id="tut6" width="125"
height="125"></canvas><br/><label id="lab6"></label></td>
<td><canvas id="tut7" width="125"
height="125"></canvas><br/><label id="lab7"></label></td>
</tr>

<tr>
<td><canvas id="tut8" width="125"
height="125"></canvas><br/><label id="lab8"></label></td>
<td><canvas id="tut9" width="125"
height="125"></canvas><br/><label id="lab9"></label></td>
<td><canvas id="tut10" width="125"
height="125"></canvas><br/><label id="lab10"></label></td>
<td><canvas id="tut11" width="125"
height="125"></canvas><br/><label id="lab11"></label></td>
</tr>
</table>
</div>
</body>
</html>

Original comment by erik.arv...@gmail.com on 22 Mar 2009 at 12:39

GoogleCodeExporter commented 9 years ago 
what's the status on this?
this is essential...
is this issue being ignored?

please please consider fixing this...
excanvas is not fully usable without it.

Original comment by changos...@gmail.com on 16 Aug 2010 at 6:36

GoogleCodeExporter commented 9 years ago 
It is a pity it is not solved yet, would greatly improve www.vuvvling.com to 
the IE users.

Original comment by dlozan...@gmail.com on 10 Sep 2010 at 11:28

GoogleCodeExporter commented 9 years ago 
Please let me know if this issue is resolved or tell me any work-arround.

Original comment by pro.vika...@gmail.com on 17 Sep 2013 at 12:08