Skip to content

Latest commit

 

History

History
115 lines (89 loc) · 2.97 KB

CheatSheet.md

File metadata and controls

115 lines (89 loc) · 2.97 KB

Below is a list of all the methods and properties of the Canvas' Context followed by its respective tabtrigger.

Example:

1. To revel "fillStyle" property, type "fist" and enter TAB
2. To insert "clearRect()" methods, type "clre" and enter TAB
and so on............

How to Use this CheatSheet:

ctx.method/property - TabTrigger + TAB

Note:

1. The Canvas' Context is set to "ctx" and cannot be changed
2. There are some MISC snippets, take a look at the MISC section
3. If you use Canvas Snippets often, save this file for easy reference

COLOR, STYLE and SHADOW

  • ctx.fillStyle - fist + TAB
  • ctx.strokeStyle - stst + TAB
  • ctx.shadowColor - shco + TAB
  • ctx.shadowBlur - shbl + TAB
  • ctx.shadowOffsetX - sox + TAB
  • ctx.shadowOffsetY - soy + TAB
  • ctx.createLinearGradient() - clg + TAB
  • ctx.createRadialGradient() - crg + TAB
  • ctx.createPattern() - cp + TAB
  • ctx.addColorStop() - acs + TAB

LINE STYLE

  • ctx.lineCap - lic + TAB
  • ctx.lineJoin - lijo + TAB
  • ctx.lineWidth - liwi + TAB
  • ctx.miterLimit - mili + TAB

RECTANGLE

  • ctx.rect() - re + TAB
  • ctx.fillRect() - fire + TAB
  • ctx.strokeRect() - stre + TAB
  • ctx.clearRect() - clre + TAB

PATH

  • ctx.fill() - fi + TAB
  • ctx.stroke() - st + TAB
  • ctx.beginPath() - bepa + TAB
  • ctx.closePath() - clpa + TAB
  • ctx.moveTo() - mot + TAB
  • ctx.lineTo() - lit + TAB
  • ctx.quadraticCurveTo() - qua + TAB
  • ctx.bezierCurveTo() - bez + TAB
  • ctx.arc() - ar + TAB
  • ctx.arcTo() - art + TAB
  • ctx.clip() - cl + TAB
  • ctx.isPointInPath() - ipip + TAB

TRANSFORMATION

  • ctx.scale() - sc + TAB
  • ctx.rotate() - ro + TAB
  • ctx.translate() - trsl + TAB
  • ctx.transform() - trsf + TAB
  • ctx.setTransform() - strsf + TAB

TEXT/FONT

  • ctx.font - fo + TAB
  • ctx.textAlign - teal + TAB
  • ctx.textBaseline - teba + TAB
  • ctx.fillText() - fite + TAB
  • ctx.strokeText() - stte + TAB
  • ctx.measureText() - mete + TAB

IMAGE DRAWING

  • ctx.drawImage() - dr + TAB

PIXAL MANIPULATION

  • ctx.createImageData() - cid + TAB
  • ctx.getImageData() - gid + TAB
  • ctx.putImageData() - pid + TAB

COMPOSITING

  • ctx.globalAlpha - glal + TAB
  • ctx.globalCompositeOperation - glco + TAB

OTHER

  • ctx.save() - sa + TAB
  • ctx.restore() - res + TAB
  • ctx.createEvent() - crev + TAB
  • ctx.getContext() - gco + TAB
  • ctx.toDataURL() - tdu + TAB

MICS

  • Height - he + TAB
  • Width - wi + TAB
  • Data - da + TAB
  • HTML BoilerPlate with a Canvas Tag - htmlcan + TAB
  • Canvas Tag with useful Attributes - cat + TAB
  • Initialize Canvas and Context - initcan + TAB
  • Center all Canvas Tags - centcan + Tab

MATH

  • Math.PI - pi + TAB
  • Math.random - rnd + TAB
  • Math.min() - min + TAB
  • Math.max() - max + TAB
  • Math.round() - round + TAB
  • Math.ceil() - cil + TAB
  • Math.floor() - flr + TAB