mathdoodle/extras.ts

## extras.ts
//

## index.html
<!doctype html>
<html>

<head>
    <title>Vector graphics with canvas</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <canvas id='canvas'></canvas>
</body>

</html>

## index.ts
window.onload = load

/**
 * The handler function to be called at the end of the document loading process.
 * @param ev The `load` event.
 */
function load() {

    const canvas = <HTMLCanvasElement> document.getElementById('canvas')

    canvas.height = 150
    canvas.width = 150

    const ctx: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D

    for (let i = 0; i < 6; i++) {
        for (let j = 0; j < 6; j++) {
            ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'
            ctx.fillRect(j * 25, i * 25, 25, 25)
        }
    }
}

## package.json
{
    "uuid": "0222c656-6b6e-43dd-931b-5e81ad97d366",
    "description": "Color Grid",
    "dependencies": {},
    "name": "color-grid",
    "version": "1.0.0",
    "linting": true,
    "showGeneratedPrograms": true
}

## style.css
#canvas {
  position: absolute;
  background-color: #cccccc;
  top: 50px;
  left: 50px;
  height: 400px;
  width: 400px;
}

## tsconfig.json
{
    "allowJs": true,
    "checkJs": true,
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "jsx": "react",
    "module": "system",
    "noImplicitAny": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": true,
    "skipLibCheck": true,
    "sourceMap": false,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "target": "es2015",
    "traceResolution": true
}

## tslint.json
{
    "rules": {
        "array-type": [
            true,
            "array"
        ],
        "curly": false,
        "comment-format": [
            true,
            "check-space"
        ],
        "eofline": false,
        "forin": true,
        "jsdoc-format": true,
        "new-parens": true,
        "no-conditional-assignment": false,
        "no-consecutive-blank-lines": false,
        "no-construct": true,
        "no-for-in-array": true,
        "no-inferrable-types": [
            true
        ],
        "no-magic-numbers": false,
        "no-shadowed-variable": true,
        "no-string-throw": true,
        "no-trailing-whitespace": [
            false,
            "ignore-jsdoc"
        ],
        "no-var-keyword": true,
        "one-variable-per-declaration": [
            true,
            "ignore-for-loop"
        ],
        "prefer-const": true,
        "prefer-for-of": true,
        "prefer-function-over-method": false,
        "prefer-method-signature": true,
        "radix": true,
        "semicolon": [
            true,
            "never"
        ],
        "trailing-comma": [
            true,
            {
                "multiline": "never",
                "singleline": "never"
            }
        ],
        "triple-equals": true,
        "use-isnan": true
    }
}
	<!doctype html>
	<html>

	<head>
	<title>Vector graphics with canvas</title>
	<link rel="stylesheet" href="style.css">
	</head>

	<body>
	<canvas id='canvas'></canvas>
	</body>

	</html>
	window.onload = load

	/**
	* The handler function to be called at the end of the document loading process.
	* @param ev The `load` event.
	*/
	function load() {

	const canvas = <HTMLCanvasElement> document.getElementById('canvas')

	canvas.height = 150
	canvas.width = 150

	const ctx: CanvasRenderingContext2D = canvas.getContext('2d') as CanvasRenderingContext2D

	for (let i = 0; i < 6; i++) {
	for (let j = 0; j < 6; j++) {
	ctx.fillStyle = 'rgb(' + Math.floor(255 - 42.5 * i) + ',' + Math.floor(255 - 42.5 * j) + ',0)'
	ctx.fillRect(j * 25, i * 25, 25, 25)
	}
	}
	}
	{
	"uuid": "0222c656-6b6e-43dd-931b-5e81ad97d366",
	"description": "Color Grid",
	"dependencies": {},
	"name": "color-grid",
	"version": "1.0.0",
	"linting": true,
	"showGeneratedPrograms": true
	}
	#canvas {
	position: absolute;
	background-color: #cccccc;
	top: 50px;
	left: 50px;
	height: 400px;
	width: 400px;
	}
	{
	"allowJs": true,
	"checkJs": true,
	"declaration": true,
	"emitDecoratorMetadata": true,
	"experimentalDecorators": true,
	"jsx": "react",
	"module": "system",
	"noImplicitAny": true,
	"noImplicitReturns": true,
	"noImplicitThis": true,
	"noUnusedLocals": true,
	"noUnusedParameters": true,
	"preserveConstEnums": true,
	"removeComments": true,
	"skipLibCheck": true,
	"sourceMap": false,
	"strictNullChecks": true,
	"suppressImplicitAnyIndexErrors": true,
	"target": "es2015",
	"traceResolution": true
	}
	{
	"rules": {
	"array-type": [
	true,
	"array"
	],
	"curly": false,
	"comment-format": [
	true,
	"check-space"
	],
	"eofline": false,
	"forin": true,
	"jsdoc-format": true,
	"new-parens": true,
	"no-conditional-assignment": false,
	"no-consecutive-blank-lines": false,
	"no-construct": true,
	"no-for-in-array": true,
	"no-inferrable-types": [
	true
	],
	"no-magic-numbers": false,
	"no-shadowed-variable": true,
	"no-string-throw": true,
	"no-trailing-whitespace": [
	false,
	"ignore-jsdoc"
	],
	"no-var-keyword": true,
	"one-variable-per-declaration": [
	true,
	"ignore-for-loop"
	],
	"prefer-const": true,
	"prefer-for-of": true,
	"prefer-function-over-method": false,
	"prefer-method-signature": true,
	"radix": true,
	"semicolon": [
	true,
	"never"
	],
	"trailing-comma": [
	true,
	{
	"multiline": "never",
	"singleline": "never"
	}
	],
	"triple-equals": true,
	"use-isnan": true
	}
	}