script: Implement enough 2D canvas support to render basic SVGs such as the tiger.

This commit is contained in:
Patrick Walton 2015-02-22 12:35:52 -05:00 committed by Josh Matthews
parent 287f390c4a
commit 55a0ee6ec7
28 changed files with 419 additions and 181 deletions

View file

@ -249,3 +249,4 @@ fragment=top != ../html/acid2.html acid2_ref.html
== text_overflow_basic_a.html text_overflow_basic_ref.html
== text_align_complex_a.html text_align_complex_ref.html
== percentage_height_root.html percentage_height_root_ref.html
== canvas_transform_a.html canvas_transform_ref.html

View file

@ -0,0 +1,26 @@
<html>
<head>
<style>
html, body {
margin: 0;
}
</style>
</head>
<body>
<canvas id=c width=400 height=300></canvas>
<script>
var canvas = document.getElementById('c');
var ctx = canvas.getContext('2d');
ctx.scale(3, 3);
ctx.fillStyle = 'rgb(255, 0, 0)';
ctx.beginPath();
ctx.moveTo(10, 10);
ctx.bezierCurveTo(10, 10, 20, 10, 20, 10);
ctx.bezierCurveTo(20, 10, 20, 20, 20, 20);
ctx.bezierCurveTo(20, 20, 10, 20, 10, 20);
ctx.closePath();
ctx.fill();
</script>
</body>
</html>

View file

@ -0,0 +1,21 @@
<html>
<head>
<style>
html, body {
margin: 0;
}
section {
position: absolute;
background: rgb(255, 0, 0);
width: 30px;
height: 30px;
top: 30px;
left: 30px;
}
</style>
</head>
<body>
<section></section>
</body>
</html>