Skip to content

Instantly share code, notes, and snippets.

View sirdarthvader's full-sized avatar
🤷‍♂️
console.log(NaN === NaN); //-> false

Ashish Singh sirdarthvader

🤷‍♂️
console.log(NaN === NaN); //-> false
View GitHub Profile
<!DOCTYPE html>
<html>
<head>
<title>Color Game</title>
<link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
<h1>
The Great
<br>
@sirdarthvader
sirdarthvader / colorGame-initial state index.html
Created June 3, 2018 23:16
Initial html file for colorGame
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Color Game</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="app.css">
</head>
<body>
const express = require('express')
const app = express()
app.get('/', (req, res) => res.send('Hello World!'))
app.listen(3000, () => console.log('Example app listening on port 3000!'))
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
let hue = 0;
let direction = true;
function draw (e) {
if(!isDrawing) return ;
console.log(e);
ctx.strokeStyle = `hsl(${hue}, 100%, 50%)`;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
function draw (e) {
if(!isDrawing) return ;
console.log(e);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
[lastX, lastY] = [e.offsetX, e.offsetY];
}
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function draw (e) {
if(!isDrawing) return ;
console.log(e);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
let isDrawing = false;
function draw (e) {
if(!isDrawing) return ;
console.log(e);
}
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', () => isDrawing = true);
});
const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.strokeStyle = '#BADA55';
ctx.lineWidth = 1;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<canvas id="canvas" width="800" height="800"></canvas>
<script src="app.js"></script>