Skip to content

Commit 0b198ad

Browse files
skadimoolamskadimoolam
committed
Updates CheatSheet and added message.json
1 parent 6ba5cf0 commit 0b198ad

File tree

3 files changed

+154
-132
lines changed

3 files changed

+154
-132
lines changed

‎CheatSheet.md

Lines changed: 76 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,97 +1,109 @@
1-
Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger
1+
Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger.
22

3+
#### Example:
4+
1. To revel "fillStyle" property, type "fist" and enter TAB
5+
2. To insert "clearRect()" methods, type "clre" and enter TAB
6+
and so on............
7+
8+
#### How to Use this CheatSheet:
9+
ctx.method/property - TabTrigger + TAB
10+
11+
#### Note:
12+
1. The Canvas' Context is set to "ctx" and cannot be changed
13+
2. There are some MISC snippets, take a look at the MISC section
14+
3. If you use Canvas Snippets often, save this file for easy reference
315

416
### COLOR, STYLE and SHADOW
5-
* fillStyle - `fist`
6-
* strokeStyle - `stat`
7-
* shadowColor - `shco`
8-
* shadowBlur - `shbl`
9-
* shadowOffsetX - `sox`
10-
* shadowOffsetY - `soy`
11-
* createLinearGradient() - `clg`
12-
* createRadialGradient() - `crg`
13-
* createPattern() - `cp`
14-
* addColorStop() - `acs`
17+
* ctx.fillStyle - `fist` + `TAB`
18+
* ctx.strokeStyle - `stat` + `TAB`
19+
* ctx.shadowColor - `shco` + `TAB`
20+
* ctx.shadowBlur - `shbl` + `TAB`
21+
* ctx.shadowOffsetX - `sox` + `TAB`
22+
* ctx.shadowOffsetY - `soy` + `TAB`
23+
* ctx.createLinearGradient() - `clg` + `TAB`
24+
* ctx.createRadialGradient() - `crg` + `TAB`
25+
* ctx.createPattern() - `cp` + `TAB`
26+
* ctx.addColorStop() - `acs` + `TAB`
1527

1628

1729
### LINE STYLE
18-
* lineCap - `lic`
19-
* lineJoin - `lijo`
20-
* lineWidth - `liwi`
21-
* miterLimit - `mili`
30+
* ctx.lineCap - `lic` + `TAB`
31+
* ctx.lineJoin - `lijo` + `TAB`
32+
* ctx.lineWidth - `liwi` + `TAB`
33+
* ctx.miterLimit - `mili` + `TAB`
2234

2335

2436
### RECTANGLE
25-
* rect() - `re`
26-
* fillRect() - `fire`
27-
* strokeRect() - `stre`
28-
* clearRect() - `clre`
37+
* ctx.rect() - `re` + `TAB`
38+
* ctx.fillRect() - `fire` + `TAB`
39+
* ctx.strokeRect() - `stre` + `TAB`
40+
* ctx.clearRect() - `clre` + `TAB`
2941

3042

3143
### PATH
32-
* fill() - `fi`
33-
* stroke() - `st`
34-
* beginPath() - `bepa`
35-
* closePath() - `clpa`
36-
* moveTo() - `mot`
37-
* lineTo() - `lit`
38-
* quadraticCurveTo() - `qua`
39-
* bezierCurveTo() - `bez`
40-
* arc() - `ar`
41-
* arcTo() - `art`
42-
* clip() - `cl`
43-
* isPointInPath() - `ipip`
44+
* ctx.fill() - `fi` + `TAB`
45+
* ctx.stroke() - `st` + `TAB`
46+
* ctx.beginPath() - `bepa` + `TAB`
47+
* ctx.closePath() - `clpa` + `TAB`
48+
* ctx.moveTo() - `mot` + `TAB`
49+
* ctx.lineTo() - `lit` + `TAB`
50+
* ctx.quadraticCurveTo() - `qua` + `TAB`
51+
* ctx.bezierCurveTo() - `bez` + `TAB`
52+
* ctx.arc() - `ar` + `TAB`
53+
* ctx.arcTo() - `art` + `TAB`
54+
* ctx.clip() - `cl` + `TAB`
55+
* ctx.isPointInPath() - `ipip` + `TAB`
4456

4557

4658
### TRANSFORMATION
47-
* scale() - `sc`
48-
* rotate() - `ro`
49-
* translate() - `trsl`
50-
* transform() - `trsf`
51-
* setTransform() - `strsf`
59+
* ctx.scale() - `sc` + `TAB`
60+
* ctx.rotate() - `ro` + `TAB`
61+
* ctx.translate() - `trsl` + `TAB`
62+
* ctx.transform() - `trsf` + `TAB`
63+
* ctx.setTransform() - `strsf` + `TAB`
5264

5365

5466
### TEXT/FONT
55-
* font - `fo`
56-
* textAlign - `teal`
57-
* textBaseline - `teba`
58-
* fillText() - `fite`
59-
* strokeText() - `stte`
60-
* measureText() - `mete`
67+
* ctx.font - `fo` + `TAB`
68+
* ctx.textAlign - `teal` + `TAB`
69+
* ctx.textBaseline - `teba` + `TAB`
70+
* ctx.fillText() - `fite` + `TAB`
71+
* ctx.strokeText() - `stte` + `TAB`
72+
* ctx.measureText() - `mete` + `TAB`
6173

6274

6375
### IMAGE DRAWING
64-
* drawImage() - `dr`
76+
* ctx.drawImage() - `dr` + `TAB`
6577

6678

6779
### PIXAL MANIPULATION
68-
* width - `wi`
69-
* height - `he`
70-
* data - `da`
71-
* createImageData() - `cid`
72-
* getImageData() - `gid`
73-
* putImageData() - `pid`
80+
* ctx.width - `wi` + `TAB`
81+
* ctx.height - `he` + `TAB`
82+
* ctx.data - `da` + `TAB`
83+
* ctx.createImageData() - `cid` + `TAB`
84+
* ctx.getImageData() - `gid` + `TAB`
85+
* ctx.putImageData() - `pid` + `TAB`
7486

7587

7688
### COMPOSITING
77-
* globalAlpha - `glal`
78-
* globalCompositeOperation - `glco`
89+
* ctx.globalAlpha - `glal` + `TAB`
90+
* ctx.globalCompositeOperation - `glco` + `TAB`
7991

8092

8193
### OTHER
82-
* save() - `sa`
83-
* restore() - `res`
84-
* createEvent() - `crev`
85-
* getContext() - `gco`
86-
* toDataURL() - `tdu`
94+
* ctx.save() - `sa` + `TAB`
95+
* ctx.restore() - `res` + `TAB`
96+
* ctx.createEvent() - `crev` + `TAB`
97+
* ctx.getContext() - `gco` + `TAB`
98+
* ctx.toDataURL() - `tdu` + `TAB`
8799

88100

89101
### MICS
90-
* HTML BoilerPlate with a Canvas Tag - `htmlcan`
91-
* Canvas Tag with useful Attributes - `cat`
92-
* Height - `he`
93-
* Width - `wi`
94-
* Data - `da`
95-
* Math.PI - `pi`
96-
* Math.random - `rnd`
97-
* Initialize Canvas and Context - `initcan`
102+
* ctx.HTML BoilerPlate with a Canvas Tag - `htmlcan` + `TAB`
103+
* ctx.Canvas Tag with useful Attributes - `cat` + `TAB`
104+
* ctx.Height - `he` + `TAB`
105+
* ctx.Width - `wi` + `TAB`
106+
* ctx.Data - `da` + `TAB`
107+
* ctx.Math.PI - `pi` + `TAB`
108+
* ctx.Math.random - `rnd` + `TAB`
109+
* ctx.Initialize Canvas and Context - `initcan` + `TAB`

‎CheatSheet.txt

Lines changed: 74 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,109 @@
1-
Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger
1+
Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger.
22

33
Example:
4-
1.To revel "fillStyle" property, type "fist" and enter TAB
5-
2.To insert "clearRect()" methods, type "clre" and enter TAB
6-
7-
and so............
4+
1. To revel "fillStyle" property, type "fist" and enter TAB
5+
2. To insert "clearRect()" methods, type "clre" and enter TAB
6+
and so on............
87

8+
How to Use this CheatSheet:
9+
ctx.method/property - TabTrigger + TAB
10+
11+
Note:
12+
1. The Canvas' Context is set to "ctx" and cannot be changed
13+
2. There are some MISC snippets, take a look at the MISC section
14+
3. If you use Canvas Snippets often, save this file for easy reference
915

1016
COLOR, STYLE and SHADOW
11-
fillStyle - fist
12-
strokeStyle - stat
13-
shadowColor - shco
14-
shadowBlur - shbl
15-
shadowOffsetX - sox
16-
shadowOffsetY - soy
17-
createLinearGradient() - clg
18-
createRadialGradient() - crg
19-
createPattern() - cp
20-
addColorStop() - acs
17+
ctx.fillStyle - fist + TAB
18+
ctx.strokeStyle - stat + TAB
19+
ctx.shadowColor - shco + TAB
20+
ctx.shadowBlur - shbl + TAB
21+
ctx.shadowOffsetX - sox + TAB
22+
ctx.shadowOffsetY - soy + TAB
23+
ctx.createLinearGradient() - clg + TAB
24+
ctx.createRadialGradient() - crg + TAB
25+
ctx.createPattern() - cp + TAB
26+
ctx.addColorStop() - acs + TAB
2127

2228

2329
LINE STYLE
24-
lineCap - lic
25-
lineJoin - lijo
26-
lineWidth - liwi
27-
miterLimit - mili
30+
ctx.lineCap - lic + TAB
31+
ctx.lineJoin - lijo + TAB
32+
ctx.lineWidth - liwi + TAB
33+
ctx.miterLimit - mili + TAB
2834

2935

3036
RECTANGLE
31-
rect() - re
32-
fillRect() - fire
33-
strokeRect() - stre
34-
clearRect() - clre
37+
ctx.rect() - re + TAB
38+
ctx.fillRect() - fire + TAB
39+
ctx.strokeRect() - stre + TAB
40+
ctx.clearRect() - clre + TAB
3541

3642

3743
PATH
38-
fill() - fi
39-
stroke() - st
40-
beginPath() - bepa
41-
closePath() - clpa
42-
moveTo() - mot
43-
lineTo() - lit
44-
quadraticCurveTo() - qua
45-
bezierCurveTo() - bez
46-
arc() - ar
47-
arcTo() - art
48-
clip() - cl
49-
isPointInPath() - ipip
44+
ctx.fill() - fi + TAB
45+
ctx.stroke() - st + TAB
46+
ctx.beginPath() - bepa + TAB
47+
ctx.closePath() - clpa + TAB
48+
ctx.moveTo() - mot + TAB
49+
ctx.lineTo() - lit + TAB
50+
ctx.quadraticCurveTo() - qua + TAB
51+
ctx.bezierCurveTo() - bez + TAB
52+
ctx.arc() - ar + TAB
53+
ctx.arcTo() - art + TAB
54+
ctx.clip() - cl + TAB
55+
ctx.isPointInPath() - ipip + TAB
5056

5157

5258
TRANSFORMATION
53-
scale() - sc
54-
rotate() - ro
55-
translate() - trsl
56-
transform() - trsf
57-
setTransform() - strsf
59+
ctx.scale() - sc + TAB
60+
ctx.rotate() - ro + TAB
61+
ctx.translate() - trsl + TAB
62+
ctx.transform() - trsf + TAB
63+
ctx.setTransform() - strsf + TAB
5864

5965

6066
TEXT/FONT
61-
font - fo
62-
textAlign - teal
63-
textBaseline - teba
64-
fillText() - fite
65-
strokeText() - stte
66-
measureText() - mete
67+
ctx.font - fo + TAB
68+
ctx.textAlign - teal + TAB
69+
ctx.textBaseline - teba + TAB
70+
ctx.fillText() - fite + TAB
71+
ctx.strokeText() - stte + TAB
72+
ctx.measureText() - mete + TAB
6773

6874

6975
IMAGE DRAWING
70-
drawImage() - dr
76+
ctx.drawImage() - dr + TAB
7177

7278

7379
PIXAL MANIPULATION
74-
width - wi
75-
height - he
76-
data - da
77-
createImageData() - cid
78-
getImageData() - gid
79-
putImageData() - pid
80+
ctx.width - wi + TAB
81+
ctx.height - he + TAB
82+
ctx.data - da + TAB
83+
ctx.createImageData() - cid + TAB
84+
ctx.getImageData() - gid + TAB
85+
ctx.putImageData() - pid + TAB
8086

8187

8288
COMPOSITING
83-
globalAlpha - glal
84-
globalCompositeOperation - glco
89+
ctx.globalAlpha - glal + TAB
90+
ctx.globalCompositeOperation - glco + TAB
8591

8692

8793
OTHER
88-
save() - sa
89-
restore() - res
90-
createEvent() - crev
91-
getContext() - gco
92-
toDataURL() - tdu
94+
ctx.save() - sa + TAB
95+
ctx.restore() - res + TAB
96+
ctx.createEvent() - crev + TAB
97+
ctx.getContext() - gco + TAB
98+
ctx.toDataURL() - tdu + TAB
9399

94100

95101
MICS
96-
HTML BoilerPlate with a Canvas Tag - htmlcan
97-
Canvas Tag with useful Attributes - cat
98-
Height - he
99-
Width - wi
100-
Data - da
101-
Math.PI - pi
102-
Math.random - rnd
103-
Initialize Canvas and Context - initcan
102+
ctx.HTML BoilerPlate with a Canvas Tag - htmlcan + TAB
103+
ctx.Canvas Tag with useful Attributes - cat + TAB
104+
ctx.Height - he + TAB
105+
ctx.Width - wi + TAB
106+
ctx.Data - da + TAB
107+
ctx.Math.PI - pi + TAB
108+
ctx.Math.random - rnd + TAB
109+
ctx.Initialize Canvas and Context - initcan + TAB

‎messages.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
{
2+
"install": "CheatSheet.txt",
3+
"1.1.1": "CheatSheet.txt"
4+
}

0 commit comments

Comments
 (0)