Implementing canvas drawImage API for HTML Canvas elements as image source

This commit is contained in:
Diego Marcos 2015-03-03 18:27:39 -08:00
parent 2a9f29f382
commit e3f5a76baa
44 changed files with 1567 additions and 118 deletions

View file

@ -0,0 +1,263 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type=''>
html {
font-family: helvetica, sans-serif;
}
canvas {
padding: 15px;
margin: 10px;
}
.example {
display: inline-block;
width: 280px;
margin-top: 50px;
margin-right: 50px;
}
.title {
text-align: center;
}
.description {
width: 100%;
}
.description div {
display: inline-block;
text-align: center;
font-size: 13px;
}
.description .source {
width: 100px;
}
.description .target {
width: 130px;
}
.example-title {
text-align: center;
font-size: 16px;
}
.error {
color: red;
}
</style>
<body>
<h1 class="title">DrawImage canvas to canvas</h1>
</body>
<script type="text/javascript">
var smoothingEnabled = false;
var examplesNum = 0;
var imageSource = {
width: 50,
height: 50
};
var destCanvas = {
width: 100,
height: 100
};
// 2 arguments, the dest origin is 0,0
// The source canvas will copied to the 0,0 position of the destination canvas
drawImage(0, 0);
// 2 arguments, the dest origin is not 0,0
// The source canvas will copied to the 25, 25 position of the destination canvas
drawImage(25, 25);
// 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
drawImage(50, 50, 50, 50);
// 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 25x25
drawImage(50, 50, 25, 25);
// 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
drawImage(50, 50, 50, 25);
// 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
drawImage(0, 0, 25, 25, 0, 0, 25, 25);
// 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
drawImage(0, 0, 25, 25, 25, 25, 25, 25);
// 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
drawImage(25, 25, 50, 50, 0, 0, 50, 50);
// The destination rectangle has negative width and height
// An exception is raised and nothing is drawn
drawImage(25, 25, 50, 50, 0, 0, -100, -100);
// 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.
drawImage(0, 0, 50, 50, 0, 0, 200, 200);
// 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
drawImage(0, 0, 100, 100, 0, 0, 50, 50);
// 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
drawImage(-25, -25, 50, 50, 0, 0, 50, 50);
// Example with non squared origin and source canvases
imageSource = {
width: 100,
height: 50
};
destCanvas = {
width: 100,
height: 50
};
drawImage(0, 0);
function renderExample(title) {
var container = document.createElement('div');
container.id = 'example' + examplesNum++;
container.setAttribute('class', 'example');
var h2 = document.createElement('h2');
h2.textContent = title;
h2.setAttribute('class', 'example-title');
container.appendChild(h2);
var div1 = document.createElement('div');
var canvas1 = document.createElement('canvas');
var canvas2 = document.createElement('canvas');
div1.appendChild(canvas1);
div1.appendChild(canvas2);
container.appendChild(div1);
var div2 = document.createElement('div');
div2.setAttribute('class', 'description');
var source = document.createElement('div');
source.textContent = ' Source (' + imageSource.width + ',' + imageSource.height + ')';
source.setAttribute('class', 'source');
var arrow = document.createElement('div');
arrow.textContent = ' -> ';
arrow.setAttribute('class', 'arrow');
var target = document.createElement('div');
target.textContent = 'Target (' + destCanvas.width + ',' + destCanvas.height + ')';
target.setAttribute('class', 'target');
div2.appendChild(source);
div2.appendChild(arrow);
div2.appendChild(target);
container.appendChild(div2);
return container;
}
function drawImage() {
var args = Array.prototype.slice.call(arguments);
var div = renderExample('drawImage(' + args.toString() + ')');
var canvasEls = div.querySelectorAll('canvas');
var canvas1 = canvasEls[0];
var canvas2 = canvasEls[1];
canvas1.width = imageSource.width;
canvas1.height = imageSource.height;
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = "#00FFFF";
ctx1.fillRect(0, 0, imageSource.width, imageSource.height);
ctx1.fillStyle = "#000000";
ctx1.fillRect(5,5,40,40);
ctx1.clearRect(10,10,30,30);
ctx1.strokeRect(15,15,20,20);
canvas2.width = destCanvas.width;
canvas2.height = destCanvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "#FF0000";
ctx2.fillRect(0, 0, destCanvas.width, destCanvas.height);
ctx2.imageSmoothingEnabled = smoothingEnabled;
args.unshift(canvas1);
try {
ctx2.drawImage.apply(ctx2, args);
}
catch(err) {
var title = div.querySelector('.example-title');
var error = document.createElement('h2');
error.setAttribute('class', 'example-title error');
div.insertBefore(error, title);
error.textContent += "Call Failed: " + err.message;
}
document.body.appendChild(div);
};
function drawImage() {
var args = Array.prototype.slice.call(arguments);
var div = renderExample('drawImage(' + args.toString() + ')');
var canvasEls = div.querySelectorAll('canvas');
var canvas1 = canvasEls[0];
var canvas2 = canvasEls[1];
canvas1.width = imageSource.width;
canvas1.height = imageSource.height;
var ctx1 = canvas1.getContext('2d');
ctx1.fillStyle = "#00FFFF";
ctx1.fillRect(0, 0, imageSource.width, imageSource.height);
ctx1.fillStyle = "#000000";
ctx1.fillRect(5,5,40,40);
ctx1.clearRect(10,10,30,30);
ctx1.strokeRect(15,15,20,20);
canvas2.width = destCanvas.width;
canvas2.height = destCanvas.height;
var ctx2 = canvas2.getContext('2d');
ctx2.fillStyle = "#FF0000";
ctx2.fillRect(0, 0, destCanvas.width, destCanvas.height);
ctx2.imageSmoothingEnabled = smoothingEnabled;
args.unshift(canvas1);
try {
ctx2.drawImage.apply(ctx2, args);
}
catch(err) {
var title = div.querySelector('.example-title');
var error = document.createElement('h2');
error.setAttribute('class', 'example-title error');
div.insertBefore(error, title);
error.textContent += "Call Failed: " + err.message;
}
document.body.appendChild(div);
};
</script>
</body>
</html>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -9,6 +9,21 @@
# Should be == with expected failure:
fragment=top != ../html/acid2.html acid2_ref.html
== 2dcontext/drawimage_1.html 2dcontext/drawimage_1_ref.html
== 2dcontext/drawimage_10.html 2dcontext/drawimage_10_ref.html
== 2dcontext/drawimage_11.html 2dcontext/drawimage_11_ref.html
== 2dcontext/drawimage_12.html 2dcontext/drawimage_12_ref.html
== 2dcontext/drawimage_2.html 2dcontext/drawimage_2_ref.html
== 2dcontext/drawimage_3.html 2dcontext/drawimage_3_ref.html
== 2dcontext/drawimage_4.html 2dcontext/drawimage_4_ref.html
== 2dcontext/drawimage_5.html 2dcontext/drawimage_5_ref.html
== 2dcontext/drawimage_6.html 2dcontext/drawimage_6_ref.html
== 2dcontext/drawimage_7.html 2dcontext/drawimage_7_ref.html
== 2dcontext/drawimage_8.html 2dcontext/drawimage_8_ref.html
== 2dcontext/drawimage_9.html 2dcontext/drawimage_9_ref.html
== 2dcontext/lineto_a.html 2dcontext/lineto_ref.html
== 2dcontext/transform_a.html 2dcontext/transform_ref.html
== abs_float_pref_width_a.html abs_float_pref_width_ref.html
== acid1_a.html acid1_b.html
== acid2_noscroll.html acid2_ref_broken.html
@ -65,10 +80,6 @@ flaky_cpu == append_style_a.html append_style_b.html
== box_sizing_sanity_check_a.html box_sizing_sanity_check_ref.html
== br.html br-ref.html
== canvas_as_block_element_a.html canvas_as_block_element_ref.html
== canvas_linear_gradient_a.html canvas_linear_gradient_ref.html
== canvas_lineto_a.html canvas_lineto_ref.html
== canvas_radial_gradient_a.html canvas_radial_gradient_ref.html
== canvas_transform_a.html canvas_transform_ref.html
== case-insensitive-font-family.html case-insensitive-font-family-ref.html
== clear_generated_content_table_a.html clear_generated_content_table_ref.html
== clip_a.html clip_ref.html

View file

@ -1,5 +0,0 @@
[2d.drawImage.canvas.html]
type: testharness
[Canvas test: 2d.drawImage.canvas]
expected: FAIL

View file

@ -0,0 +1,5 @@
[2d.drawImage.null.html]
type: testharness
[Canvas test: 2d.drawImage.null]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.drawImage.self.1.html]
type: testharness
[Canvas test: 2d.drawImage.self.1]
expected: FAIL

View file

@ -1,5 +0,0 @@
[2d.drawImage.self.2.html]
type: testharness
[Canvas test: 2d.drawImage.self.2]
expected: FAIL

View file

@ -0,0 +1,5 @@
[2d.drawImage.wrongtype.html]
type: testharness
[Incorrect image types in drawImage do not match any defined overloads, so WebIDL throws a TypeError]
expected: FAIL

View file

@ -1,5 +0,0 @@
[imagesmoothing.html]
type: testharness
[When the CanvasRenderingContext2D object is created, the attribute must be set to true.]
expected: FAIL

View file

@ -6975,9 +6975,6 @@
[CanvasRenderingContext2D interface: attribute globalCompositeOperation]
expected: FAIL
[CanvasRenderingContext2D interface: attribute imageSmoothingEnabled]
expected: FAIL
[CanvasRenderingContext2D interface: operation createPattern(CanvasImageSource,DOMString)]
expected: FAIL
@ -7056,9 +7053,6 @@
[CanvasRenderingContext2D interface: operation drawImage(CanvasImageSource,unrestricted double,unrestricted double,unrestricted double,unrestricted double)]
expected: FAIL
[CanvasRenderingContext2D interface: operation drawImage(CanvasImageSource,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double)]
expected: FAIL
[CanvasRenderingContext2D interface: operation addHitRegion(HitRegionOptions)]
expected: FAIL
@ -7152,9 +7146,6 @@
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "globalCompositeOperation" with the proper type (14)]
expected: FAIL
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "imageSmoothingEnabled" with the proper type (15)]
expected: FAIL
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "strokeStyle" with the proper type (16)]
expected: FAIL
@ -7281,21 +7272,9 @@
[CanvasRenderingContext2D interface: calling measureText(DOMString) on document.createElement("canvas").getContext("2d") with too few arguments must throw TypeError]
expected: FAIL
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "drawImage" with the proper type (49)]
expected: FAIL
[CanvasRenderingContext2D interface: calling drawImage(CanvasImageSource,unrestricted double,unrestricted double) on document.createElement("canvas").getContext("2d") with too few arguments must throw TypeError]
expected: FAIL
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "drawImage" with the proper type (50)]
expected: FAIL
[CanvasRenderingContext2D interface: calling drawImage(CanvasImageSource,unrestricted double,unrestricted double,unrestricted double,unrestricted double) on document.createElement("canvas").getContext("2d") with too few arguments must throw TypeError]
expected: FAIL
[CanvasRenderingContext2D interface: document.createElement("canvas").getContext("2d") must inherit property "drawImage" with the proper type (51)]
expected: FAIL
[CanvasRenderingContext2D interface: calling drawImage(CanvasImageSource,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double,unrestricted double) on document.createElement("canvas").getContext("2d") with too few arguments must throw TypeError]
expected: FAIL