Respect the source rectangle when drawing a canvas to another canvas.

This commit is contained in:
Josh Matthews 2018-06-05 19:00:54 -04:00
parent a07c718895
commit 57440549d8
4 changed files with 61 additions and 8 deletions

View file

@ -96,20 +96,20 @@ impl<'a> CanvasData<'a> {
// In this case source and target are the same canvas // In this case source and target are the same canvas
let image_data = self.read_pixels(source_rect.to_i32(), image_size); let image_data = self.read_pixels(source_rect.to_i32(), image_size);
let writer = |draw_target: &DrawTarget| {
write_image(draw_target, image_data, source_rect.size, dest_rect,
smoothing_enabled, self.state.draw_options.composition,
self.state.draw_options.alpha);
};
if self.need_to_draw_shadow() { if self.need_to_draw_shadow() {
let rect = Rect::new(Point2D::new(dest_rect.origin.x as f32, dest_rect.origin.y as f32), let rect = Rect::new(Point2D::new(dest_rect.origin.x as f32, dest_rect.origin.y as f32),
Size2D::new(dest_rect.size.width as f32, dest_rect.size.height as f32)); Size2D::new(dest_rect.size.width as f32, dest_rect.size.height as f32));
self.draw_with_shadow(&rect, |new_draw_target: &DrawTarget| { self.draw_with_shadow(&rect, writer);
write_image(&new_draw_target, image_data, source_rect.size, dest_rect,
smoothing_enabled, self.state.draw_options.composition,
self.state.draw_options.alpha);
});
} else { } else {
// Writes on target canvas // Writes on target canvas
write_image(&self.drawtarget, image_data, image_size, dest_rect, writer(&self.drawtarget);
smoothing_enabled, self.state.draw_options.composition,
self.state.draw_options.alpha);
} }
} }

View file

@ -18849,6 +18849,18 @@
{} {}
] ]
], ],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self.html": [
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self.html",
[
[
"/2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html",
"=="
]
],
{}
]
],
"2dcontext/line-styles/canvas_linestyles_linecap_001.htm": [ "2dcontext/line-styles/canvas_linestyles_linecap_001.htm": [
[ [
"/2dcontext/line-styles/canvas_linestyles_linecap_001.htm", "/2dcontext/line-styles/canvas_linestyles_linecap_001.htm",
@ -188371,6 +188383,11 @@
{} {}
] ]
], ],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html": [
[
{}
]
],
"2dcontext/drawing-model/.gitkeep": [ "2dcontext/drawing-model/.gitkeep": [
[ [
{} {}
@ -405888,6 +405905,14 @@
"3b15af010f2ce13316fed6fcab9d85e05484b60d", "3b15af010f2ce13316fed6fcab9d85e05484b60d",
"testharness" "testharness"
], ],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self.html": [
"ec6a6d1111aae9ce051cd1a2503a5b01149ceca6",
"reftest"
],
"2dcontext/drawing-images-to-the-canvas/drawimage_canvas_self_ref.html": [
"f09c2922fc630872519fc37de47f232ecc8cc677",
"support"
],
"2dcontext/drawing-images-to-the-canvas/drawimage_html_image.html": [ "2dcontext/drawing-images-to-the-canvas/drawimage_html_image.html": [
"ec86f8f5c84628cd5f3b8673de8dde34dc372fd9", "ec86f8f5c84628cd5f3b8673de8dde34dc372fd9",
"testharness" "testharness"

View file

@ -0,0 +1,17 @@
<link rel="match" href="drawimage_canvas_self_ref.html">
<canvas id="dest" height="100" width="100"></canvas>
<script>
var canvasWidth = canvasHeight = 100;
var destWidth = canvasWidth / 4;
var destHeight = canvasHeight / 4;
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = 'red';
destCtx.fillRect(0, 0, canvasWidth, canvasHeight);
destCtx.fillStyle = 'green';
destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2);
destCtx.drawImage(destCanvas,
0, 0, destWidth, destHeight,
canvasWidth / 2, canvasHeight / 2, destWidth, destHeight);
</script>

View file

@ -0,0 +1,11 @@
<canvas id="dest" height="100" width="100"></canvas>
<script>
var canvasWidth = canvasHeight = 100;
var destCanvas = document.getElementById('dest');
var destCtx = destCanvas.getContext('2d');
destCtx.fillStyle = 'red';
destCtx.fillRect(0, 0, canvasWidth, canvasHeight);
destCtx.fillStyle = 'green';
destCtx.fillRect(0, 0, canvasWidth / 2, canvasHeight / 2);
destCtx.fillRect(canvasWidth / 2, canvasHeight / 2, canvasWidth / 4, canvasHeight / 4);
</script>