mirror of
https://github.com/servo/servo.git
synced 2025-08-14 18:05:36 +01:00
Implementing canvas drawImage API for HTML Canvas elements as image source
This commit is contained in:
Diego Marcos
parent
2a9f29f382
commit
e3f5a76baa
44 changed files with 1567 additions and 118 deletions
39
tests/ref/2dcontext/drawimage_1.html
Normal file
39
tests/ref/2dcontext/drawimage_1.html
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
// 2 arguments, the dest origin is 0,0
|
||||
// The source canvas will copied to the 0,0 position of the destination canvas
|
||||
destCtx.drawImage(sourceCanvas, 0, 0);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
tests/ref/2dcontext/drawimage_10.html
Normal file
42
tests/ref/2dcontext/drawimage_10.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// The destination rectangle is larger thant the destination canvas
|
||||
// When the destination rectangle is outside the destination image (the scratch bitmap), the pixels
|
||||
// that land outside the scratch bitmap are discarded, as if the destination was an infinite canvas
|
||||
// whose rendering was clipped to the dimensions of the scratch bitmap.
|
||||
destCtx.drawImage(sourceCanvas, 0, 0, 50, 50, 0, 0, 200, 200);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_10_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_10_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, 100, 100);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(20, 20, 80, 80);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_11.html
Normal file
41
tests/ref/2dcontext/drawimage_11.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// The source rectangle is larger than the source canvas
|
||||
// The source area is clipped to fit the source image
|
||||
// and the destination are is clipped in the same proportion
|
||||
destCtx.drawImage(sourceCanvas, 0, 0, 100, 100, 0, 0, 50, 50);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_11_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_11_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, 25, 25);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(2, 2, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_12.html
Normal file
41
tests/ref/2dcontext/drawimage_12.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// Negative coorditanes of the source rectangle
|
||||
// The source area is clipped to fit the source image
|
||||
// and the destination are is clipped in the same proportion
|
||||
destCtx.drawImage(sourceCanvas, -25, -25, 50, 50, 0, 0, 50, 50);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_12_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_12_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, 25, 25);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(5, 5, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
tests/ref/2dcontext/drawimage_1_ref.html
Normal file
31
tests/ref/2dcontext/drawimage_1_ref.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(5, 5, 40, 40);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
40
tests/ref/2dcontext/drawimage_2.html
Normal file
40
tests/ref/2dcontext/drawimage_2.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// 2 arguments, the dest origin is not 0,0
|
||||
// The source canvas will copied to the 25, 25 position of the destination canvas
|
||||
destCtx.drawImage(sourceCanvas, 25, 25);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
tests/ref/2dcontext/drawimage_2_ref.html
Normal file
31
tests/ref/2dcontext/drawimage_2_ref.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(25, 25, sourceWidth, sourceHeight);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(30, 30, 40, 40);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_3.html
Normal file
41
tests/ref/2dcontext/drawimage_3.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// 4 arguments, the source origin is not 0,0, the dest size is provided
|
||||
// The source canvas will copied to the 50, 50 position of the destination canvas and
|
||||
// on an area of 50x50 pixels
|
||||
destCtx.drawImage(sourceCanvas, 50, 50, 50, 50);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
31
tests/ref/2dcontext/drawimage_3_ref.html
Normal file
31
tests/ref/2dcontext/drawimage_3_ref.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(50, 50, sourceWidth, sourceHeight);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(55, 55, 40, 40);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
tests/ref/2dcontext/drawimage_4.html
Normal file
42
tests/ref/2dcontext/drawimage_4.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// 4 arguments, the dest origin is not 0,0 and the dest size is provided but
|
||||
// does not match the size of the source. The image will be distorted
|
||||
// The source canvas will copied to the 50,50 position of the destination canvas
|
||||
// and it will be shrunk to a and area of 20x20
|
||||
destCtx.drawImage(sourceCanvas, 50, 50, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_4_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_4_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(50, 50, 20, 20);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(52, 52, 16, 16);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
42
tests/ref/2dcontext/drawimage_5.html
Normal file
42
tests/ref/2dcontext/drawimage_5.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// The source canvas will copied to the 50,50 position of the destination canvas
|
||||
// over an area of 50x25 pixels
|
||||
// The copied image will be distorted along the x axis
|
||||
|
||||
destCtx.drawImage(sourceCanvas, 50, 50, 50, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_5_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_5_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(50, 50, 50, 20);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(55, 52, 40, 16);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_6.html
Normal file
41
tests/ref/2dcontext/drawimage_6.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// 8 arguments, both destination and source origins are 0, 0
|
||||
// An area of 25x25 pixels of the source image will be copied to
|
||||
// an area of 25x25 pixels of the destination canvas
|
||||
destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 0, 0, 25, 25);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_6_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_6_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, 25, 25);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(5, 5, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_7.html
Normal file
41
tests/ref/2dcontext/drawimage_7.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// 8 arguments the destination origin is not 0,0
|
||||
// An area of 25x25 pixels of the source image will be copied to
|
||||
// an area of 25x25 pixels of the destination canvas in the position 25,25
|
||||
destCtx.drawImage(sourceCanvas, 0, 0, 25, 25, 25, 25, 25, 25);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_7_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_7_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(25, 25, 25, 25);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(30, 30, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
41
tests/ref/2dcontext/drawimage_8.html
Normal file
41
tests/ref/2dcontext/drawimage_8.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// The source rectangle overflows the source image
|
||||
// The source area is clipped to fit the source image
|
||||
// and the destination are is clipped in the same proportion
|
||||
destCtx.drawImage(sourceCanvas, 25, 25, 50, 50, 0, 0, 50, 50);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/drawimage_8_ref.html
Normal file
26
tests/ref/2dcontext/drawimage_8_ref.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.fillStyle = "#00FFFF";
|
||||
destCtx.fillRect(0, 0, 25, 25);
|
||||
destCtx.fillStyle = "#000000";
|
||||
destCtx.fillRect(0, 0, 20, 20);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
tests/ref/2dcontext/drawimage_9.html
Normal file
48
tests/ref/2dcontext/drawimage_9.html
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script>
|
||||
|
||||
var sourceWidth = 50;
|
||||
var sourceHeight = 50;
|
||||
var smoothingEnabled = false;
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var sourceCanvas = document.createElement('canvas');
|
||||
sourceCanvas.width = sourceWidth;
|
||||
sourceCanvas.height = sourceHeight;
|
||||
|
||||
var sourceCtx = sourceCanvas.getContext('2d');
|
||||
sourceCtx.fillStyle = "#00FFFF";
|
||||
sourceCtx.fillRect(0, 0, sourceWidth, sourceHeight);
|
||||
sourceCtx.fillStyle = "#000000";
|
||||
sourceCtx.fillRect(5,5,40,40);
|
||||
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
destCtx.imageSmoothingEnabled = smoothingEnabled;
|
||||
|
||||
// The destination rectangle has negative width and height
|
||||
// An exception is raised and nothing is drawn
|
||||
try {
|
||||
destCtx.drawImage(sourceCanvas, 25, 50, 50, 0, 0, -100, -100);
|
||||
// It makes the test fail if the exception is not thrown
|
||||
destCtx.fillStyle = "#0000FF";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
}
|
||||
catch(err) {
|
||||
console.err("Exception Thrown");
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
22
tests/ref/2dcontext/drawimage_9_ref.html
Normal file
22
tests/ref/2dcontext/drawimage_9_ref.html
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
</head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<canvas id="dest" height="100" width="100"></canvas>
|
||||
<script type="text/javascript">
|
||||
|
||||
var destCanvas = document.getElementById('dest');
|
||||
var destCtx = destCanvas.getContext('2d');
|
||||
destCtx.fillStyle = "#FF0000";
|
||||
destCtx.fillRect(0, 0, destCanvas.width, destCanvas.height);
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
29
tests/ref/2dcontext/lineto_a.html
Normal file
29
tests/ref/2dcontext/lineto_a.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
<canvas id="c" width="150" height="150" >
|
||||
Your browser does not support the HTML5 canvas tag.</canvas>
|
||||
|
||||
<script>
|
||||
var c = document.getElementById("c");
|
||||
var ctx = c.getContext("2d");
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(20, 20);
|
||||
ctx.lineTo(20, 130);
|
||||
ctx.lineTo(130, 130);
|
||||
ctx.lineTo(130, 20);
|
||||
ctx.closePath();
|
||||
|
||||
ctx.fillStyle = '#90EE90';
|
||||
ctx.fill();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
19
tests/ref/2dcontext/lineto_ref.html
Normal file
19
tests/ref/2dcontext/lineto_ref.html
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
div {
|
||||
background: #90EE90;
|
||||
width: 110px;
|
||||
height: 110px;
|
||||
margin: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
26
tests/ref/2dcontext/transform_a.html
Normal file
26
tests/ref/2dcontext/transform_a.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<canvas id=c width=400 height=300></canvas>
|
||||
<script>
|
||||
var canvas = document.getElementById('c');
|
||||
var ctx = canvas.getContext('2d');
|
||||
ctx.scale(3, 3);
|
||||
ctx.fillStyle = 'rgb(255, 0, 0)';
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(10, 10);
|
||||
ctx.bezierCurveTo(10, 10, 20, 10, 20, 10);
|
||||
ctx.bezierCurveTo(20, 10, 20, 20, 20, 20);
|
||||
ctx.bezierCurveTo(20, 20, 10, 20, 10, 20);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
21
tests/ref/2dcontext/transform_ref.html
Normal file
21
tests/ref/2dcontext/transform_ref.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<html>
|
||||
<head>
|
||||
<style>
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
section {
|
||||
position: absolute;
|
||||
background: rgb(255, 0, 0);
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
top: 30px;
|
||||
left: 30px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<section></section>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Add table
Add a link
Reference in a new issue