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
@sirdarthvader
sirdarthvader / App.js
Created March 26, 2018 23:49
Initial state of App Component before adding any new code.
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
@sirdarthvader
sirdarthvader / index.js
Created March 26, 2018 23:57
Initial state for index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
@sirdarthvader
sirdarthvader / index.html
Created March 26, 2018 23:59
Initial and final state for index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
import React from 'react';
import Tilt from 'react-tilt';
import brain from './brain.png';
import './Navigation.css';
const Navigation = () => {
return (
<div className="nav pa3">
<div>
<Tilt className="Tilt"
<!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>
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 isDrawing = false;
function draw (e) {
if(!isDrawing) return ;
console.log(e);
}
canvas.addEventListener('mousemove', draw);
canvas.addEventListener('mousedown', () => isDrawing = true);
});
let isDrawing = false;
let lastX = 0;
let lastY = 0;
function draw (e) {
if(!isDrawing) return ;
console.log(e);
ctx.beginPath();
ctx.moveTo(lastX, lastY);
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 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);