canvas-snippets.json

{
	// Place your snippets for javascript here. Each snippet is defined under a snippet name and has a prefix, body and 
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
	// same ids are connected.
	// Example:
	"Print to console": {
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},

  "Canvas" : {
    "prefix": "canvas:default",
    "body": [
      "const canvas = document.querySelector('canvas')",
      "const c = canvas.getContext('2d')",
      "",
      "canvas.width = innerWidth",
      "canvas.height = innerHeight",
      "",
      "const mouse = {",
      "  x: innerWidth / 2,",
      "  y: innerHeight / 2",
      "}",
      "",
      "const colors = ['#2185C5', '#7ECEFD', '#FFF6E5', '#FF7F66']",
      "",
      "// Event Listeners",
      "addEventListener('mousemove', (event) => {",
      "  mouse.x = event.clientX",
      "  mouse.y = event.clientY",
      "})",
      "",
      "addEventListener('resize', () => {",
      "  canvas.width = innerWidth",
      "  canvas.height = innerHeight",
      "",
      "  init()",
      "})",
      "",
      "// Objects",
      "class Object {",
      "  constructor(x, y, radius, color) {",
      "    this.x = x",
      "    this.y = y",
      "    this.radius = radius",
      "    this.color = color",
      "  }",
      "",
      "  draw() {",
      "    c.beginPath()",
      "    c.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false)",
      "    c.fillStyle = this.color",
      "    c.fill()",
      "    c.closePath()",
      "  }",
      "",
      "  update() {",
      "    this.draw()",
      "  }",
      "}",
      "",
      "// Implementation",
      "let objects",
      "function init() {",
      "  objects = []",
      "",
      "  for (let i = 0; i < 400; i++) {",
      "    // objects.push()",
      "  }",
      "}",
      "",
      "// Animation Loop",
      "function animate() {",
      "  requestAnimationFrame(animate)",
      "  c.clearRect(0, 0, canvas.width, canvas.height)",
      "",
      "  c.fillText('HTML CANVAS BOILERPLATE', mouse.x, mouse.y)",
      "  // objects.forEach(object => {",
      "  //  object.update()",
      "  // })",
      "}",
      "",
      "init()",
      "animate()",
      "",
      "",
      "// utils",
      "",
      "function randomIntFromRange(min, max) {",
      "  return Math.floor(Math.random() * (max - min + 1) + min)",
      "}",
      "",
      "function randomColor(colors) {",
      "  return colors[Math.floor(Math.random() * colors.length)]",
      "}",
      "",
      "function distance(x1, y1, x2, y2) {",
      "  const xDist = x2 - x1",
      "  const yDist = y2 - y1",
      "",
      "  return Math.sqrt(Math.pow(xDist, 2) + Math.pow(yDist, 2))",
      "}",
      "",
      "module.exports = { randomIntFromRange, randomColor, distance }"
    ],
    "description": "Canvas boilerplate ( default )"

  }
}