Canvas Library

by Jonathan Lam

HTML

<canvas id="canvas"></canvas><br>
Width: <input type="number" id="width" value="500">
Height: <input type="number" id="height" value="500"><br>
<textarea id="code" cols="50" rows="10">fs(b500)&#13;&#10;r(0, 0, w, h, 50)&#13;&#10;fs(b300)&#13;&#10;r(w/4, h/4, w/2, w/2, 25)</textarea><br>
<button id="draw">Draw</button><br>
File name: <input id="fileName">.png
<button id="download">Download</button><br>
Code name: <input id="codeName">
<button id="saveCode">Save Code</button><br>
Open Code: <select id="storage"></select>
<button id="deleteCode">Delete selected code</button>
<style id="fonts"></style>

CSS

* {
  letter-spacing: 0.5px;
}

JavaScript

// canvas variables
var canvas = document.querySelector("#canvas");
var ctx = canvas.getContext("2d");

// html entities
var widthInput = document.querySelector("#width");
var heightInput = document.querySelector("#height");
var codeInput = document.querySelector("#code");
var drawButton = document.querySelector("#draw");
var fileNameInput = document.querySelector("#fileName");
var downloadButton = document.querySelector("#download");
var codeNameInput = document.querySelector("#codeName");
var saveCodeButton = document.querySelector("#saveCode");
var storageSelect = document.querySelector("#storage");
var deleteCodeButton = document.querySelector("#deleteCode");
var fontsStyle = document.querySelector("#fonts");

// drawing variables
var w, h;

// drawing library
// colors: w, bl, [color][weight], where colors are from: r-red, pi-pink, pu-purple, dpu-deep purple, i-indigo, b-blue, lb-light blue, c-cyan, t-teal, g-green, lg-light green, l-lime, y-yellow, a-amber, o-orange, do-deep orange, br-brown, gra-gray, bg-blue grey, and weights are 100, 300, 500, 700, 900
// fs: set fill style
// ss: set stroke style
// lw: set line width
// f: set font
// fr: create rectangle (optional parameter for radius if rounded)
// c: fill/stroke circle
// p: fill/stroke path
// t: fill/stroke text
// i: place image (from url)
var wh = "white", bl = "black", r100 = "#ffcdd2", r300 = "#e57373", r500 = "#f44336", r700 = "#d32f2f", r900 = "#b71c1c", pi100 = "#F8BBD0", pi300 = "#F06292", pi500 = "#E91E63", pi700 = "#C2185B", pi900 = "#880E4F", pu100 = "#E1BEE7", pu300 = "#BA68C8", pu500 = "#9C27B0", pu700 = "#7B1FA2", pu900 = "#4A148C", dpu100 = "#D1C4E9", dpu300 = "#9575CD", dpu500 = "#673AB7", dpu700 = "#512DA8", dpu900 = "#311B92", i100 = "#C5CAE9", i300 = "#7986CB", i500 = "#3F51B5", i700 = "#303F9F", i900 = "#1A237E", b100 = "#BBDEFB", b300 = "#64B5F6", b500 = "#2196F3", b700 = "#1976D2", b900 = "#0D47A1", lb100 = "#B3E5FC", lb300 = "#4FC3F7", lb500 = "#03A9F4", lb700 = "#0288D1",...