Reduce canvas size for sampling_types demo.

The default canvas size was so tall that the instructions to
drag an image on the canvas were easily missed because they
are likely scrolled off the bottom of the page. This change
does the following:

1. Reduce canvas size to minimum for the hard-coded image
   renderings.
2. Add a dashed gray border so that the user can more easily
   identify where to drag the image. If not dragged to the
   canvas then a new tab is opened (we don't want this).
3. Tweaked image drag instructions to reference "rectangle"
   (the canvas) instead of the page.

Bug: skia:13456
Change-Id: I4f5aeb2653702e1daa80fe30f6c037b98eb585e2
Reviewed-on: https://skia-review.googlesource.com/c/skia/+/551766
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Chris Mumford <cmumford@google.com>
This commit is contained in:
Chris Mumford 2022-06-22 12:32:14 -07:00 committed by SkCQ
parent cdda3902be
commit 27c8076a9e

View File

@ -6,6 +6,9 @@
<script type="text/javascript" src="https://unpkg.com/canvaskit-wasm@0.25.0/bin/full/canvaskit.js"></script>
<style>
#draw {
border: 1px dashed grey;
}
figcaption {
max-width: 800px;
}
@ -20,11 +23,12 @@
</div>
<figure>
<!-- width/height hard-coded for grid of 256px images. -->
<div ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<canvas id="draw" width=2048 height=1600></canvas>
<canvas id="draw" width=868 height=592></canvas>
</div>
<figcaption>
Drop an Image onto the page (above)
Drop an Image onto the rectangle above
</figcaption>
</figure>