7 ### Getting the context
10 var canvas = document.getElementById('c')
11 var c = canvas.getContext('2d')
17 // x = 10, y = 20, width = 200, height = 100
18 c.fillStyle = '#ff0000'
19 c.strokeStyle = '#ff00ff'
28 c.fillRect(10, 20, 200, 100)
36 ### Saving and restoring
46 Saves: `strokeStyle` `fillStyle` `globalAlpha` `lineWidth` `lineCap` `lineJoin` `miterLimit` `shadowOffsetX` `shadowOffsetY` `shadowBlur` `shadowColor`
47 `globalCompositeOperation`, Transformations (`translate` `rotate` `scale` `transform` `setTransform`), Clipping path
54 c.clearRect(0, 0, w, h)
66 To rotate along origin:
74 To scale along origin:
77 c.translate(-ox*x, -oy*y)
79 c.translate(ox/x, oy/y)
82 See [MDN: Transformations][xform].
87 c.drawImage(image, dx, dy, [dw, dh]);
88 /* `image` can be HTML Image/Canvas/Video */
91 See [MDN: Images][images].
93 ### Colors, styles shadows
96 c.strokeStyle = '#ff00ff';
97 c.fillStyle = '#ff00ff';
103 c.shadowOffsetBlur = 3.0;
104 c.shadowColor = 'rgba(0,0,0,0.2)';
107 See [MDN: Styles][styles]
112 gr = c.createLinearGradient(x0,y0,x1,y1)
113 gr = c.createRadialGradient(x0,y0,r0,x1,y1,r1)
114 pat = c.createPattern(image, 'repeat-x')
127 c.quadraticCurveTo(cpx,cpy,x,y)
128 c.bezierCurveTo(cp1x,cp1y,cp2x,cp2y)
136 * [Canvas Cheatsheet PDF][pdf]
138 [pdf]: http://www.nihilogic.dk/labs/canvas_sheet/HTML5_Canvas_Cheat_Sheet.pdf
139 [xform]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Transformations
140 [styles]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Applying_styles_and_colors
141 [images]: https://developer.mozilla.org/en-US/docs/Canvas_tutorial/Using_images