58 lines
2.3 KiB
HTML
58 lines
2.3 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>Test drawImage(canvas) with canvas with different composite modes.</title>
|
|
<script src="resources/canvas-composite-image-common.js"></script>
|
|
<script type="application/x-javascript">
|
|
function drawImage(context, compositeIndex, alpha) {
|
|
context.globalCompositeOperation = compositeTypes[compositeIndex];
|
|
if (alpha)
|
|
context.globalAlpha = 0.5;
|
|
var sourceElement = document.getElementById('source-canvas');
|
|
context.drawImage(sourceElement, 10, 10);
|
|
}
|
|
|
|
function setupTest() {
|
|
var imageElement = document.getElementById('image');
|
|
var canvas = document.getElementById('source-canvas');
|
|
canvas.width = imageElement.width;
|
|
canvas.height = imageElement.height;
|
|
var context = canvas.getContext('2d');
|
|
context.drawImage(imageElement, 0, 0);
|
|
}
|
|
|
|
</script>
|
|
<style type="text/css">
|
|
body { margin: 5px; font-family: arial,verdana,helvetica; background: #fff; }
|
|
canvas { border: 1px solid #999; }
|
|
canvas#source-canvas { border: none; }
|
|
div { margin: 10px; }
|
|
#output h1 { font-size: medium; font-weight: normal; }
|
|
#output h2 { font-size: small; font-weight: normal; }
|
|
#output div { font-size: small; margin: 0px; }
|
|
#output .pass { color: green; }
|
|
#output .fail { color: rgb(255, 0, 0); }
|
|
#output .error { color: rgb(255, 0, 64); }
|
|
td { padding: 2px 5px; }
|
|
table { border-collapse: collapse; }
|
|
</style>
|
|
</head>
|
|
<body onload="runTest();">
|
|
<div>Test Results</div>
|
|
<div><table id='outputtable'></table></div>
|
|
<div>Test Image</div>
|
|
<div><img id = "image" src="data:image/png;base64,
|
|
iVBORw0KGgoAAAANSUhEUgAAAJYAAAA8CAIAAAAL5NQ9AAAACXBIWXMAAAsTAAALEwEAmpwY
|
|
AAAAB3RJTUUH2woaBQc4oLEFpAAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeB
|
|
DhcAAACMSURBVHja7dNBEYAgFEVRPhHMYgAzUIsmVnFvB/fsoQb+ObfBmzMvxneW1D1vzz2w
|
|
FiEUQiFEKIRCKIQIhVAIhRChEAqhECIUQiEUQoRCKIRCiFAIhVAIEep3xTWTLzzu5oVCKIRC
|
|
iFAIhVAIEQqhEAohQiEUQiFEKIRCKIQIhVAIhRChEAqhECLUZi3VEwcBMGr1NgAAAABJRU5E
|
|
rkJggg==
|
|
"></div>
|
|
<div>Source Canvas</div>
|
|
<div><canvas id = "source-canvas"></canvas></div>
|
|
<div>Test Output</div>
|
|
<div id='output'></div>
|
|
</body>
|
|
</html>
|