OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <title>Sizing SVG image when drawn to canvas</title> | |
3 <script> | |
4 function createCircle(x, y, r, sx, sy) | |
5 { | |
6 sx = typeof sx !== 'undefined' ? sx : 1; | |
fs
2016/02/23 11:44:23
Nit: Assuming we don't intend to pass 0, then mayb
davve
2016/02/23 13:15:30
Fixed in dependent CL.
| |
7 sy = typeof sy !== 'undefined' ? sy : 1; | |
8 | |
9 var canvas = document.createElement('canvas'); | |
10 canvas.width = 100; | |
11 canvas.height = 100; | |
12 document.documentElement.appendChild(canvas); | |
13 | |
14 var ctx = canvas.getContext('2d'); | |
15 ctx.fillStyle = "blue"; | |
16 | |
17 ctx.translate(50, 50); | |
18 ctx.scale(sx, sy); | |
19 ctx.beginPath(); | |
20 ctx.arc(x, y, r, 0, 2*Math.PI); | |
21 ctx.fill(); | |
22 } | |
23 createCircle(0, 0, 50); | |
24 createCircle(0, -25, 25); | |
25 createCircle(-25, 0, 25); | |
26 createCircle(0, 0, 25, 1, 2); | |
27 createCircle(0, 0, 25, 2, 1); | |
28 createCircle(-25, 0, 25); | |
29 createCircle(0, -25, 25); | |
30 createCircle(0, -25, 25); | |
31 </script> | |
OLD | NEW |