geometry-border-image-004-ref.html

Enable keyboard shortcuts

<!DOCTYPE html>

<html>

<style>

html, body { margin: 0; padding: 0; }

</style>

<body>

<canvas id ="canvas" width="120" height="120"></canvas>

<script>

var canvas = document.getElementById('canvas');

var context = canvas.getContext("2d");

// The test geometry-border-image4.html has a 100*100 paint canvas, it specifies

// border-width=10 and border-image-outset=10, which means that it is drawing to

// a 140*140 area. However, because the test has "border-image-slice: 0 fill",

// together with the border-width=10, makes it draw to a 120*120 area.

// In this ref html, we draw to a 140*140 area, but scale it to fit the 120*120

// canvas.

context.scale(120/140, 120/140);

context.fillStyle = 'green';

context.fillRect(0, 0, 140, 140);

</script>

</body>

</html>