mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-09-21 16:58:58 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Create a new painter after resizing canvas element backing store

Browse source 
Otherwise, we just keep painting into the old backing store. This fixes
an issue where the main spreadsheet area in Google Sheets was not
visually updating, despite everything looking good in memory.
This commit is contained in:
Andreas Kling 2025-08-24 15:50:24 +02:00 • committed by Alexander Kalenik
commit 79b30e7c9a
Notes: github-actions[bot] 2025-08-24 14:37:28 +00:00
3 changed files with 26 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

2
Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
View file

@ -222,6 +222,7 @@ void CanvasRenderingContext2D::set_size(Gfx::IntSize const& size)
return;
m_size = size;
m_surface = nullptr;
m_painter = nullptr;
}
void CanvasRenderingContext2D::allocate_painting_surface_if_needed()
@ -238,6 +239,7 @@ void CanvasRenderingContext2D::allocate_painting_surface_if_needed()
auto skia_backend_context = canvas_element().navigable()->traversable_navigable()->skia_backend_context();
m_surface = Gfx::PaintingSurface::create_with_size(skia_backend_context, canvas_element().bitmap_size_for_canvas(), color_type, Gfx::AlphaType::Premultiplied);
m_painter = nullptr;
// https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-settings:concept-canvas-alpha
// Thus, the bitmap of such a context starts off as opaque black instead of transparent black;

4
Tests/LibWeb/Text/expected/canvas/resize-canvas-and-keep-painting.txt Normal file
View file

@ -0,0 +1,4 @@
0
128
0
255

20
Tests/LibWeb/Text/input/canvas/resize-canvas-and-keep-painting.html Normal file
View file

@ -0,0 +1,20 @@
<!doctype html>
<script src="../include.js"></script>
<canvas id="myCanvas" width="10" height="10"></canvas>
<script>
test(() => {
myCanvas.offsetWidth;
let x = myCanvas.getContext("2d");
x.fillStyle = 'red';
x.fillRect(0, 0, 10, 10);
myCanvas.width = 20;
myCanvas.height = 20;
x.fillStyle = 'green';
x.fillRect(0, 0, 20, 20);
let data = x.getImageData(0, 0, 20, 20);
println(data.data[0]);
println(data.data[1]);
println(data.data[2]);
println(data.data[3]);
});
</script>