Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

94 lines (75 sloc) 2.774 kb
<!DOCTYPE html>
<html>
<head>
<title>WebGL-2D Example</title>
<script src="../webgl-2d.js" type="text/javascript"></script>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", init, false);
var cvs2D, cvsGL, ctx2D, ctxGL, width, height;
var frameCount = 0;
function init() {
cvs2D = document.getElementById("canvas2D");
cvsGL = document.getElementById("canvasGL");
width = cvs2D.width, height = cvs2D.height;
WebGL2D.enable(cvsGL);
ctx2D = cvs2D.getContext("2d");
ctxGL = cvsGL.getContext("webgl-2d");
draw(ctxGL);
var imgData = ctxGL.getImageData(0, 0, width, height);
ctx2D.putImageData(imgData, 0, 0);
cvs2D = document.getElementById("canvas2D2");
cvsGL = document.getElementById("canvasGL2");
width = cvs2D.width, height = cvs2D.height;
WebGL2D.enable(cvsGL);
ctx2D = cvs2D.getContext("2d");
ctxGL = cvsGL.getContext("webgl-2d");
draw(ctx2D, "rgb(0, 90, 0)", "rgba(255, 255, 50, 0.1)");
var imgData = ctx2D.getImageData(0, 0, width, height);
ctxGL.putImageData(imgData, 0, 0);
}
function draw(ctx, color1, color2) {
ctx.fillStyle = color1 || "rgb(50, 0, 50)";
ctx.fillRect(0, 0, width, height);
ctx.save();
ctx.translate(width/2, height/2);
ctx.rotate(frameCount/100);
ctx.save();
ctx.scale(0.6, 0.6);
ctx.fillStyle = color2 || "rgba(50, 255, 255, 0.1)";
for (var i = 0; i < 50; i++) {
ctx.scale(2,2);
ctx.fillRect(0, 0, 50, 50);
ctx.scale(.5, .5);
ctx.rotate(-2*Math.PI/50);
}
ctx.restore();
for (var rr=1; rr<128; rr*=1.3) {
ctx.rotate(0.4);
ctx.strokeRect(-rr, -rr, 2*rr, 2*rr);
} //for
ctx.restore();
}
</script>
<style type="text/css">
body, * {
font-family: sans-serif;
}
</style>
</head>
<body>
<h1>Example: WebGL-2D Comparison</h1>
<h2>getImageData and putImageData</h2>
<div style="float: left; margin-right: 10px;">
<h2>WebGL-2D</h2>
<canvas id="canvasGL" width="170" height="170" style="border: 1px solid black;"></canvas>
<br />
<canvas id="canvasGL2" width="170" height="170" style="border: 1px solid black;"></canvas>
</div>
<div style="float: left;">
<h2>Canvas2D</h2>
<canvas id="canvas2D" width="170" height="170" style="border: 1px solid black;"></canvas>
<br />
<canvas id="canvas2D2" width="170" height="170" style="border: 1px solid black;"></canvas>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.