1
1
# SVGCanvas
2
2
3
- Draw on SVG using Canvas's 2D Context API.
4
- A maintained fork of [ gliffy's canvas2svg] ( https://github.com/gliffy/canvas2svg ) .
3
+ Draw on SVG using Canvas's 2D Context API. A maintained fork of
4
+ [ gliffy's canvas2svg] ( https://github.com/gliffy/canvas2svg ) .
5
5
6
6
## Demo
7
7
8
8
https://zenozeng.github.io/svgcanvas/test/
9
9
10
10
## How it works
11
11
12
- We create a mock 2d canvas context. Use the canvas context like you would on a normal canvas. As you call methods, we build up a scene graph in SVG.
12
+ We create a mock 2d canvas context. Use the canvas context like you would on a
13
+ normal canvas. As you call methods, we build up a scene graph in SVG.
13
14
14
15
## Usage
15
16
16
17
``` javascript
17
- import { Context } from ' svgcanvas'
18
+ import { Context } from " svgcanvas" ;
18
19
19
20
const ctx = new Context (500 , 500 );
20
21
@@ -23,25 +24,25 @@ ctx.fillStyle = "red";
23
24
ctx .fillRect (100 , 100 , 100 , 100 );
24
25
25
26
// serialize your SVG
26
- const mySerializedSVG = ctx .getSerializedSvg ();
27
+ const mySerializedSVG = ctx .getSerializedSvg ();
27
28
```
28
29
29
30
Wrapping canvas elements:
30
31
31
32
``` javascript
32
- import { Context , Element } from ' svgcanvas' ;
33
+ import { Context , Element } from " svgcanvas" ;
33
34
34
35
const canvas = document .createElement (" canvas" );
35
36
const context2D = canvas .getContext (" 2d" );
36
37
37
38
// more options to pass into constructor:
38
39
const options = {
39
- height: 2000 , // falsy values get converted to 500
40
- width: 0 / 0 , // falsy values get converted to 500
41
- ctx: context2D, // existing Context2D to wrap around
42
- enableMirroring: false , // whether canvas mirroring (get image data) is enabled (defaults to false)
43
- document : undefined , // overrides default document object
44
- }
40
+ height: 2000 , // falsy values get converted to 500
41
+ width: 0 / 0 , // falsy values get converted to 500
42
+ ctx: context2D, // existing Context2D to wrap around
43
+ enableMirroring: false , // whether canvas mirroring (get image data) is enabled (defaults to false)
44
+ document : undefined , // overrides default document object
45
+ };
45
46
46
47
// Creates a mock canvas context (mocks `context2D` above)
47
48
const ctx = new Context (options);
@@ -64,80 +65,6 @@ dom.svg; // the inline svg element
64
65
65
66
https://zenozeng.github.io/p5.js-svg/test/
66
67
67
- ## CHANGELOG
68
-
69
- ### v2.2.2
70
-
71
- - Delegate getAttribute/setAttribute ([ Validark] ( https://github.com/Validark ) ) [ #8 ] ( https://github.com/zenozeng/svgcanvas/pull/8 )
72
-
73
- ### v2.2.1
74
-
75
- - fix(SVGCanvasElement): addEventListener
76
-
77
- ### v2.2.0
78
-
79
- - feat: Context.prototype.getImageData (experimental) for https://github.com/gliffy/canvas2svg/issues/3 and https://github.com/zenozeng/p5.js-svg/issues/203
80
-
81
- ### v2.1.0
82
-
83
- - feat: SVGCanvasElement(options)
84
- - feat: options.debug
85
- - refactor
86
-
87
- ### v2.0.7
88
-
89
- - fix typo
90
- - rollup 2.67.0
91
-
92
- ### v2.0.6
93
-
94
- - utils.toString for https://github.com/zenozeng/p5.js-svg/issues/204
95
-
96
- ### v2.0.5
97
-
98
- - Fix adding CanvasPattern ([ Xavier Delamotte] ( https://github.com/x4d3 ) ) [ #7 ] ( https://github.com/zenozeng/svgcanvas/pull/7 )
99
-
100
- ### v2.0.4
101
-
102
- - fix: push/pop transformMatrixStack when save/restore, for https://github.com/zenozeng/p5.js-svg/issues/191
103
-
104
- ### v2.0.3
105
-
106
- - feat: sync element's width and height to context
107
-
108
- ### v2.0.2
109
-
110
- - feat: Implement CanvasTransform Interface, https://github.com/gliffy/canvas2svg/pull/83
111
- - feat: ClearCanvas in fillRect
112
- - feat: Element API
113
- - feat: ESM
114
- - fix: Recreate root ` <g> ` when __ clearCanvas to remove all attributes
115
- - chore: Bundle JavaScript using Rollup
116
- - chore: GitHub Actions
117
-
118
- ### v1.x
119
-
120
- - v1.0.19 Fix __ parseFont to not crash
121
- - v1.0.18 clip was not working, the path never made it to the clip area
122
- - v1.0.17 Fix bug with drawing in an empty context. Fix image translation problem. Fix globalAlpha issue.
123
- - v1.0.16 Add npm publishing support, bower file and optimize for arcs with no angles.
124
- - v1.0.15 Setup travis, add testharness and debug playground, and fix regression for __ createElement refactor
125
- - v1.0.14 bugfix for gradients, move __ createElement to scoped createElement function, so all classes have access.
126
- - v1.0.13 set paint order before stroke and fill to make them behavior like canvas
127
- - v1.0.12 Implementation of ctx.prototype.arcTo.
128
- - v1.0.11 call lineTo instead moveTo in ctx.arc, fixes closePath issue and straight line issue
129
- - v1.0.10 when lineTo called, use M instead of L unless subpath exists
130
- - v1.0.9 use currentDefaultPath instead of <path >'s d attribute, fixes stroke's different behavior in SVG and canvas.
131
- - v1.0.8 reusing __ createElement and adding a properties undefined check
132
- - v1.0.7 fixes for multiple transforms and fills and better text support from stafyniaksacha
133
- - v1.0.6 basic support for text baseline (contribution from KoKuToru)
134
- - v1.0.5 fixes for #5 and #6 (with contributions from KoKuToru)
135
- - v1.0.4 generate ids that start with a letter
136
- - v1.0.3 fixed #4 where largeArcFlag was set incorrectly in some cases
137
- - v1.0.2 Split up rgba values set in fill/stroke to allow illustrator import support.
138
- - v1.0.1 Allow C2S to be called as a function. https://github.com/gliffy/canvas2svg/issues/2
139
- - v1.0.0 Initial release
140
-
141
68
## License
142
69
143
70
This library is licensed under the MIT license.
0 commit comments