<link crossorigin="anonymous" media="all" integrity="sha512-KbB4y5unNzDOOHlrNh7nGziPvcXtv0seLXOC5S4Mw0EqTtXhxqmDCEvb/ZV9T1m9sth14CbzrxLoBD9/VEMuNA==" rel="stylesheet" href="https://github.githubassets.com/assets/github-29b078cb9ba73730ce38796b361ee71b.css" />
<meta name="twitter:image:src" content="https://avatars3.githubusercontent.com/u/57091220?s=400&v=4" /><meta name="twitter:site" content="@github" /><meta name="twitter:card" content="summary" /><meta name="twitter:title" content="Ch-oi/NotCanvas" /><meta name="twitter:description" content="This is not a canvas project. Contribute to Ch-oi/NotCanvas development by creating an account on GitHub." />
<meta property="og:image" content="https://avatars3.githubusercontent.com/u/57091220?s=400&v=4" /><meta property="og:site_name" content="GitHub" /><meta property="og:type" content="object" /><meta property="og:title" content="Ch-oi/NotCanvas" /><meta property="og:url" content="https://github.com/Ch-oi/NotCanvas" /><meta property="og:description" content="This is not a canvas project. Contribute to Ch-oi/NotCanvas development by creating an account on GitHub." />
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-analytics" content="UA-3769691-2">
<meta name="hostname" content="github.com">
<meta name="user-login" content="Ch-oi">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload" content="OTk2ODNlNDJjMDE3ZjE5OGUzZDhiY2E2MTljNDA1NDA3MzdmOWRhYzQwMmFjNGRmN2E4ZWFiMDM1NzA3ZGRiNHx7InJlbW90ZV9hZGRyZXNzIjoiMTE2LjQ5Ljg5LjE5IiwicmVxdWVzdF9pZCI6IkUzNTY6NzRCODpBQTI5OjExNjM4OjVFQTc3NTZBIiwidGltZXN0YW1wIjoxNTg4MDMyOTE1LCJob3N0IjoiZ2l0aHViLmNvbSJ9">
<meta name="enabled-features" content="MARKETPLACE_SOCIAL_PROOF_CUSTOMERS,MARKETPLACE_TRENDING_SOCIAL_PROOF,MARKETPLACE_RECOMMENDATIONS,MARKETPLACE_PENDING_INSTALLATIONS,GHE_CLOUD_TRIAL,PAGE_STALE_CHECK">
<link href="https://github.com/Ch-oi/NotCanvas/commits/christophe.atom" rel="alternate" title="Recent Commits to NotCanvas:christophe" type="application/atom+xml">
<link rel="canonical" href="https://github.com/Ch-oi/NotCanvas/blob/christophe/README.md" data-pjax-transient>
<div class="position-relative js-header-wrapper ">
<a href="#start-of-content" class="p-3 bg-blue text-white show-on-focus js-skip-to-content">Skip to content</a>
<span class="Progress progress-pjax-loader position-fixed width-full js-pjax-loader-bar">
<span class="progress-pjax-loader-bar top-0 left-0" style="width: 0%;"></span>
</span>
<header class="Header py-lg-0 js-details-container Details flex-wrap flex-lg-nowrap p-responsive" role="banner">
<div class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
- No suggested jump to results
-
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28"> <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"> </div> <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search"> <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository"> In this repository </span> <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub"> All GitHub </span> <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> </div> <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"> Jump to <span class="d-inline-block ml-1 v-align-middle">↵</span> </div> -
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none" alt="" aria-label="Team" src="" width="28" height="28"> <div class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target"> </div> <div class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none js-jump-to-badge-search"> <span class="js-jump-to-badge-search-text-default d-none" aria-label="in this repository"> In this repository </span> <span class="js-jump-to-badge-search-text-global d-none" aria-label="in all of GitHub"> All GitHub </span> <span aria-hidden="true" class="d-inline-block ml-1 v-align-middle">↵</span> </div> <div aria-hidden="true" class="border rounded-1 flex-shrink-0 bg-gray px-1 text-gray-light ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump"> Jump to <span class="d-inline-block ml-1 v-align-middle">↵</span> </div>
<li class="d-flex flex-justify-center flex-items-center p-0 f5 js-jump-to-suggestion">
<img src="https://github.githubassets.com/images/spinners/octocat-spinner-128.gif" alt="Octocat Spinner Icon" class="m-2" width="28">
</li>
</div>
</label>
<nav class="d-flex flex-column flex-lg-row flex-self-stretch flex-lg-self-auto" aria-label="Global">
<a class="Header-link py-lg-3 d-block d-lg-none py-2 border-top border-lg-top-0 border-white-fade-15" data-ga-click="Header, click, Nav menu - item:dashboard:user" aria-label="Dashboard" href="/dashboard">
Dashboard
<div class="mr-0 mr-lg-3 py-2 py-lg-0 border-top border-lg-top-0 border-white-fade-15">
<a class="js-selected-navigation-item Header-link py-lg-3 d-inline-block" data-ga-click="Header, click, Nav menu - item:marketplace context:user" data-octo-click="marketplace_click" data-octo-dimensions="location:nav_bar" data-selected-links=" /marketplace" href="/marketplace">
Marketplace
</div>
<a class="Header-link d-block d-lg-none mr-0 mr-lg-3 py-2 py-lg-3 border-top border-lg-top-0 border-white-fade-15" href="https://github.com/Ch-oi">
<img class="avatar avatar-user" height="20" width="20" alt="@Ch-oi" src="https://avatars0.githubusercontent.com/u/57091220?s=60&v=4" />
Ch-oi
<a aria-label="You have no unread notifications" class="Header-link notification-indicator position-relative tooltipped tooltipped-sw js-socket-channel js-notification-indicator" data-hotkey="g n" data-ga-click="Header, go to notifications, icon:read" data-channel="notification-changed:57091220" href="/notifications">
<span class="js-indicator-modifier mail-status "></span>
<svg class="octicon octicon-bell" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 12v1H0v-1l.73-.58c.77-.77.81-2.55 1.19-4.42C2.69 3.23 6 2 6 2c0-.55.45-1 1-1s1 .45 1 1c0 0 3.39 1.23 4.16 5 .38 1.88.42 3.66 1.19 4.42l.66.58H14zm-7 4c1.11 0 2-.89 2-2H5c0 1.11.89 2 2 2z"></path></svg>
<span class="feature-preview-indicator js-feature-preview-indicator" hidden></span>
<span class="dropdown-caret"></span>
<span class="feature-preview-indicator js-feature-preview-indicator" hidden></span>
<span class="dropdown-caret"></span>
<div class="pl-3 pr-3 f6 user-status-container js-user-status-context pb-1" data-url="/users/status?compact=1&link_mentions=0&truncate=1">
Clear status
Never
<ul class="dropdown-menu dropdown-menu-se pl-0 overflow-auto" style="width: 220px; max-height: 15.5em">
<li>
<button type="button" class="btn-link dropdown-item js-user-status-expire-button ws-normal" title="Never">
<span class="d-inline-block text-bold mb-1">Never</span>
<div class="f6 lh-condensed">Keep this status until you clear your status or edit your status.</div>
</button>
</li>
<li class="dropdown-divider" role="none"></li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 30 minutes" value="2020-04-28T08:45:15+08:00">
in 30 minutes
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 1 hour" value="2020-04-28T09:15:15+08:00">
in 1 hour
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 4 hours" value="2020-04-28T12:15:15+08:00">
in 4 hours
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="today" value="2020-04-28T23:59:59+08:00">
today
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="this week" value="2020-05-03T23:59:59+08:00">
this week
</button>
</li>
</ul>
<include-fragment class="js-user-status-org-picker" data-url="/users/status/organizations"></include-fragment>
</div>
<div class="d-flex flex-items-center flex-justify-between p-3 border-top">
<button type="submit" disabled class="width-full btn btn-primary mr-2 js-user-status-submit">
Set status
</button>
<button type="button" disabled class="width-full js-clear-user-status-button btn ml-2 ">
Clear status
</button>
</div>
Clear status
Never
<ul class="dropdown-menu dropdown-menu-se pl-0 overflow-auto" style="width: 220px; max-height: 15.5em">
<li>
<button type="button" class="btn-link dropdown-item js-user-status-expire-button ws-normal" title="Never">
<span class="d-inline-block text-bold mb-1">Never</span>
<div class="f6 lh-condensed">Keep this status until you clear your status or edit your status.</div>
</button>
</li>
<li class="dropdown-divider" role="none"></li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 30 minutes" value="2020-04-28T08:45:15+08:00">
in 30 minutes
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 1 hour" value="2020-04-28T09:15:15+08:00">
in 1 hour
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="in 4 hours" value="2020-04-28T12:15:15+08:00">
in 4 hours
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="today" value="2020-04-28T23:59:59+08:00">
today
</button>
</li>
<li>
<button type="button" class="btn-link dropdown-item ws-normal js-user-status-expire-button" title="this week" value="2020-05-03T23:59:59+08:00">
this week
</button>
</li>
</ul>
<include-fragment class="js-user-status-org-picker" data-url="/users/status/organizations"></include-fragment>
</div>
<div class="d-flex flex-items-center flex-justify-between p-3 border-top">
<button type="submit" disabled class="width-full btn btn-primary mr-2 js-user-status-submit">
Set status
</button>
<button type="button" disabled class="width-full js-clear-user-status-button btn ml-2 ">
Clear status
</button>
</div>
</div>
<div role="none" class="dropdown-divider"></div>
<a role="menuitem" class="dropdown-item" href="/Ch-oi" data-ga-click="Header, go to profile, text:your profile">Your profile</a>
<a role="menuitem" class="dropdown-item" href="/Ch-oi?tab=repositories" data-ga-click="Header, go to repositories, text:your repositories">Your repositories</a>
<a role="menuitem" class="dropdown-item" href="/Ch-oi?tab=projects" data-ga-click="Header, go to projects, text:your projects">Your projects</a>
<a role="menuitem" class="dropdown-item" href="/Ch-oi?tab=stars" data-ga-click="Header, go to starred repos, text:your stars">Your stars</a>
<a role="menuitem" class="dropdown-item" href="https://gist.github.com/mine" data-ga-click="Header, your gists, text:your gists">Your gists</a>
<div role="none" class="dropdown-divider"></div>
Feature preview
<a role="menuitem" class="dropdown-item" href="https://help.github.com" data-ga-click="Header, go to help, text:help">Help</a>
<a role="menuitem" class="dropdown-item" href="/settings/profile" data-ga-click="Header, go to settings, icon:settings">Settings</a>
<!-- '"` --><!-- </textarea></xmp> --></option></form><form class="logout-form" action="/logout" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="nYx61NW+isi8LIgI4ypRfwrOn1lG1E99t57T5F6ygXjfTloYW/lN/CqLuLbOH2HMSJUhHQ4XPZICZans/M9iMw==" />
<button type="submit" class="dropdown-item dropdown-signout" data-ga-click="Header, sign out, icon:logout" role="menuitem">
Sign out
</button>
<input type="text" name="required_field_7274" hidden="hidden" class="form-control" /><input type="hidden" name="timestamp" value="1588032915296" class="form-control" /><input type="hidden" name="timestamp_secret" value="8fbb3f0394c5f6eee800b8189cf8c27d63a4977ca00a7596f7856b740dbf6cde" class="form-control" />
</div>
<div id="js-flash-container">
<div class="js-flash-template-message"></div>
<div class="d-flex container-lg mb-4 p-responsive d-none d-lg-flex">
<div class="flex-auto min-width-0 width-fit mr-3">
<h1 class="public d-flex flex-wrap flex-items-center break-word float-none ">
</div>
<ul class="pagehead-actions flex-shrink-0 " >
<!-- '"` --><!-- </textarea></xmp> --></option></form><form data-remote="true" class="clearfix js-social-form js-social-container" action="/notifications/subscribe" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="9kcy5HUP8RyMxW+BMCNrhdUpLcIxnUWoUJwnZNhFWYuc2UUuN+SHmVRL3Nfr6qqd7GCTiIXUqE/tWQRGLrl9lA==" /> <input type="hidden" name="repository_id" value="257155168">
<details class="details-reset details-overlay select-menu float-left">
<summary class="select-menu-button float-left btn btn-sm btn-with-count" data-hydro-click="{"event_type":"repository.click","payload":{"target":"WATCH_BUTTON","repository_id":257155168,"originating_url":"https://github.com/Ch-oi/NotCanvas/blob/christophe/README.md","user_id":57091220}}" data-hydro-click-hmac="e87e41f3e42b224f43472625e7178212e2a0a3ccee5765bdf252471cc6cb5ad6" data-ga-click="Repository, click Watch settings, action:blob#show"> <span data-menu-button>
<svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
Unwatch
</span>
Notifications
Not watching
Be notified only when participating or @mentioned.
Watch
<button type="submit" name="do" value="release_only" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
<svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
<div class="select-menu-item-text">
<span class="select-menu-item-heading">Releases only</span>
<span class="description">Be notified of new releases, and when participating or @mentioned.</span>
<span class="hidden-select-button-text" data-menu-button-contents>
<svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
Unwatch releases
</span>
</div>
</button>
<button type="submit" name="do" value="subscribed" class="select-menu-item width-full" aria-checked="true" role="menuitemradio">
<svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
<div class="select-menu-item-text">
<span class="select-menu-item-heading">Watching</span>
<span class="description">Be notified of all conversations.</span>
<span class="hidden-select-button-text" data-menu-button-contents>
<svg class="octicon octicon-eye v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8.06 2C3 2 0 8 0 8s3 6 8.06 6C13 14 16 8 16 8s-3-6-7.94-6zM8 12c-2.2 0-4-1.78-4-4 0-2.2 1.8-4 4-4 2.22 0 4 1.8 4 4 0 2.22-1.78 4-4 4zm2-4c0 1.11-.89 2-2 2-1.11 0-2-.89-2-2 0-1.11.89-2 2-2 1.11 0 2 .89 2 2z"></path></svg>
Unwatch
</span>
</div>
</button>
<button type="submit" name="do" value="ignore" class="select-menu-item width-full" aria-checked="false" role="menuitemradio">
<svg class="octicon octicon-check select-menu-item-icon" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M12 5l-8 8-4-4 1.5-1.5L4 10l6.5-6.5L12 5z"></path></svg>
<div class="select-menu-item-text">
<span class="select-menu-item-heading">Ignoring</span>
<span class="description">Never be notified.</span>
<span class="hidden-select-button-text" data-menu-button-contents>
<svg class="octicon octicon-mute v-align-text-bottom" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.81v10.38c0 .67-.81 1-1.28.53L3 10H1c-.55 0-1-.45-1-1V7c0-.55.45-1 1-1h2l3.72-3.72C7.19 1.81 8 2.14 8 2.81zm7.53 3.22l-1.06-1.06-1.97 1.97-1.97-1.97-1.06 1.06L11.44 8 9.47 9.97l1.06 1.06 1.97-1.97 1.97 1.97 1.06-1.06L13.56 8l1.97-1.97z"></path></svg>
Stop ignoring
</span>
</div>
</button>
</div>
</details-menu>
</details>
<a class="social-count js-social-count"
href="/Ch-oi/NotCanvas/watchers"
aria-label="1 user is watching this repository">
1
</a>
Fork
</button>
<h3 class="Box-title">Fork NotCanvas</h3>
<div class="text-center ml-n3 mr-n3">
<include-fragment>
<div class="octocat-spinner my-3" aria-label="Loading..."></div>
<p class="f5 text-gray">If this dialog fails to load, you can visit <a href="/Ch-oi/NotCanvas/fork">the fork page</a> directly.</p>
</include-fragment>
</div>
<a href="/Ch-oi/NotCanvas/network/members" class="social-count"
aria-label="0 users forked this repository">
0
</a>
</div>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" data-hotkey="g i" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /Ch-oi/NotCanvas/issues" href="/Ch-oi/NotCanvas/issues">
<div class="d-inline"><svg class="octicon octicon-issue-opened" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 011.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"></path></svg></div>
<span itemprop="name">Issues</span>
<span class="Counter">0</span>
<meta itemprop="position" content="2">
Pull requests 0
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement" class="position-relative float-left">
<a data-hotkey="g w" data-skip-pjax="true" class="js-selected-navigation-item reponav-item" data-selected-links="repo_actions /Ch-oi/NotCanvas/actions" href="/Ch-oi/NotCanvas/actions">
<div class="d-inline"><svg class="octicon octicon-play" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M14 8A7 7 0 110 8a7 7 0 0114 0zm-8.223 3.482l4.599-3.066a.5.5 0 000-.832L5.777 4.518A.5.5 0 005 4.934v6.132a.5.5 0 00.777.416z"></path></svg></div>
Actions
<a data-hotkey="g b" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /Ch-oi/NotCanvas/projects" href="/Ch-oi/NotCanvas/projects">
<div class="d-inline"><svg class="octicon octicon-project" viewBox="0 0 15 16" version="1.1" width="15" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M10 12h3V2h-3v10zm-4-2h3V2H6v8zm-4 4h3V2H2v12zm-1 1h13V1H1v14zM14 0H1a1 1 0 00-1 1v14a1 1 0 001 1h13a1 1 0 001-1V1a1 1 0 00-1-1z"></path></svg></div>
Projects
<span class="Counter">0</span>
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a class="js-selected-navigation-item selected reponav-item" itemprop="url" aria-current="page" data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages /Ch-oi/NotCanvas/tree/christophe" href="/Ch-oi/NotCanvas/tree/christophe">
<span itemprop="name">Code</span>
<meta itemprop="position" content="1">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_issues repo_labels repo_milestones /Ch-oi/NotCanvas/issues" href="/Ch-oi/NotCanvas/issues">
<span itemprop="name">Issues</span>
<span class="Counter">0</span>
<meta itemprop="position" content="2">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_pulls checks /Ch-oi/NotCanvas/pulls" href="/Ch-oi/NotCanvas/pulls">
<span itemprop="name">Pull requests</span>
<span class="Counter">0</span>
<meta itemprop="position" content="4">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_projects new_repo_project repo_project /Ch-oi/NotCanvas/projects" href="/Ch-oi/NotCanvas/projects">
<span itemprop="name">Projects</span>
<span class="Counter">0</span>
<meta itemprop="position" content="5">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_actions /Ch-oi/NotCanvas/actions" href="/Ch-oi/NotCanvas/actions">
<span itemprop="name">Actions</span>
<meta itemprop="position" content="6">
<span itemscope itemtype="http://schema.org/ListItem" itemprop="itemListElement">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="repo_wiki /Ch-oi/NotCanvas/wiki" href="/Ch-oi/NotCanvas/wiki">
<span itemprop="name">Wiki</span>
<meta itemprop="position" content="7">
<a itemprop="url" class="js-selected-navigation-item reponav-item" data-selected-links="security overview alerts policy token_scanning code_scanning /Ch-oi/NotCanvas/security" href="/Ch-oi/NotCanvas/security">
<span itemprop="name">Security</span>
<span class="Counter js-security-deferred-tab-count" hidden></span>
<meta itemprop="position" content="8">
<a class="d-none js-permalink-shortcut" data-hotkey="y" href="/Ch-oi/NotCanvas/blob/bb849579b4e4eebd84290bffe8f4e510713e0991/README.md">Permalink</a>
<!-- blob contrib key: blob_contributors:v22:7d0d5ab386be3775a64fcaf30151c59e -->
<div class="d-flex flex-items-start flex-shrink-0 flex-column flex-md-row pb-3">
<span class="d-flex flex-justify-between width-full width-md-auto">
<div class="BtnGroup flex-shrink-0 d-md-none">
<a href="/Ch-oi/NotCanvas/find/christophe"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<clipboard-copy value="README.md" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
</div>
</span>
<h2 id="blob-path" class="breadcrumb flex-auto min-width-0 text-normal flex-md-self-center ml-md-2 mr-md-3 my-2 my-md-0">
<span class="js-repo-root text-bold"><span class="js-path-segment"><a data-pjax="true" href="/Ch-oi/NotCanvas/tree/christophe"><span>NotCanvas</span></a></span></span><span class="separator">/</span><strong class="final-path">README.md</strong>
</h2>
<div class="BtnGroup flex-shrink-0 d-none d-md-inline-block">
<a href="/Ch-oi/NotCanvas/find/christophe"
class="js-pjax-capture-input btn btn-sm BtnGroup-item"
data-pjax
data-hotkey="t">
Find file
</a>
<clipboard-copy value="README.md" class="btn btn-sm BtnGroup-item">
Copy path
</clipboard-copy>
</div>
</div>
chris2058
Readme final version
bb84957
Apr 28, 2020
<div class="Box-body d-flex flex-items-center flex-auto f6 border-bottom-0 flex-wrap" >
<details class="details-reset details-overlay details-overlay-dark lh-default text-gray-dark float-left mr-2" id="blob_contributors_box">
<summary class="btn-link">
<span><strong>2</strong> contributors</span>
</summary>
<details-dialog
class="Box Box--overlay d-flex flex-column anim-fade-in fast"
aria-label="Users who have contributed to this file"
src="/Ch-oi/NotCanvas/contributors-list/christophe/README.md" preload>
<div class="Box-header">
<button class="Box-btn-octicon btn-octicon float-right" type="button" aria-label="Close dialog" data-close-dialog>
<svg class="octicon octicon-x" viewBox="0 0 12 16" version="1.1" width="12" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M7.48 8l3.75 3.75-1.48 1.48L6 9.48l-3.75 3.75-1.48-1.48L4.52 8 .77 4.25l1.48-1.48L6 6.52l3.75-3.75 1.48 1.48L7.48 8z"></path></svg>
</button>
<h3 class="Box-title">
Users who have contributed to this file
</h3>
</div>
<include-fragment class="octocat-spinner my-3" aria-label="Loading..."></include-fragment>
</details-dialog>
</details>
<span class="">
<a class="avatar-link" data-hovercard-type="user" data-hovercard-url="/users/Ch-oi/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="/Ch-oi/NotCanvas/commits/christophe/README.md?author=Ch-oi">
<img class="avatar mr-1 avatar-user" src="https://avatars3.githubusercontent.com/u/57091220?s=40&v=4" width="20" height="20" alt="@Ch-oi" />
</div>
<div class="Box mt-3 position-relative
">
109 lines (88 sloc)
<span class="file-info-divider"></span>
4.08 KB
<div class="BtnGroup">
<a id="raw-url" class="btn btn-sm BtnGroup-item" href="/Ch-oi/NotCanvas/raw/christophe/README.md">Raw</a>
<a class="btn btn-sm js-update-url-with-hash BtnGroup-item" data-hotkey="b" href="/Ch-oi/NotCanvas/blame/christophe/README.md">Blame</a>
<a rel="nofollow" class="btn btn-sm BtnGroup-item" href="/Ch-oi/NotCanvas/commits/christophe/README.md">History</a>
</div>
<div>
<a class="btn-octicon tooltipped tooltipped-nw js-remove-unless-platform"
data-platforms="windows,mac"
href="https://desktop.github.com"
aria-label="Open this file in GitHub Desktop"
data-ga-click="Repository, open with desktop">
<svg class="octicon octicon-device-desktop" viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M15 2H1c-.55 0-1 .45-1 1v9c0 .55.45 1 1 1h5.34c-.25.61-.86 1.39-2.34 2h8c-1.48-.61-2.09-1.39-2.34-2H15c.55 0 1-.45 1-1V3c0-.55-.45-1-1-1zm0 9H1V3h14v8z"></path></svg>
</a>
<!-- '"` --><!-- </textarea></xmp> --></option></form><form class="inline-form js-update-url-with-hash" action="/Ch-oi/NotCanvas/edit/christophe/README.md" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="ACHzD3bXB9f0R/c9OvrLYVxT7GrV0Dp5bEJ5uDqpSq8EQx3zU0VWRfi3CBQchoU5XEt8fXXm/9Qs4M4nzNomlQ==" />
<button class="btn-octicon tooltipped tooltipped-nw" type="submit"
aria-label="Edit this file" data-hotkey="e" data-disable-with>
<svg class="octicon octicon-pencil" viewBox="0 0 14 16" version="1.1" width="14" height="16" aria-hidden="true"><path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 011.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"></path></svg>
</button>
PROJECT NAME/TITLE
The app is called 'NotCanvas'.
This document gives a high-level overview of how the app is set up.
REQUIREMENTS:
The app serves as a tool for manually creating images.
The app is designed to operate independently of any text-based information for the user, relying on intuitiveness.
USER NOTES:
The app has five main buttons at the top of the page:
Button Element
1 Style clicking opens a dropdown menu:
1 Slider choose line width
2 Button 70% canvas opacity
3 Button 100% canvas opacity
4 Button fill colour tool
5 Button use colour (after mixing colour or selecting colour below)
6 Slider add colour to mix (red)
7 Slider add colour to mix (green)
8 Slider add colour to mix (blue)
9 Panel view mixed colour/currently selected colour
10 Button Group panel of default colours which can be selected on-click.
2 Draw clicking opens a dropdown menu:
1 Button free draw
2 Button draw straight line
3 Button draw curve
4 Button draw rectangle
5 Button draw circle
6 Button draw triangle
7 Button create text box
8 Button eraser
3 Undo undo last edit made to the canvas
4 Redo redo last edit made to the canvas
5 Settings clicking opens a dropdown menu: (clicking 10 times reveals hidden button)
1 Button clear canvas
2 Button upload background image
3 Button save canvas as png file
4 Button animation for drawn circles
Hidden Button start hidden game:
survive by manouevring the black circle with the mouse, so that it avoids all the moving red viruses !
PROJECT NOTES:
As of 28th April 2019:
Use of latest Fontawesome 5 icons restricted , apparently due to the CDN link tags being out of date.
So choice of icons was limited, necessitating use of google icons with an additional Google CDN link. This needs more investigation.
DESIGN NOTES:
HTML:
external scripts should be placed in the header or the bottom of the body section.
local scripts in the bottom of the body section.
all buttons and controls are to be situated in the large nav bar section, leaving the rest of the body section contianing only the canvas.
the aim is to have no written text on the HTML page, so the code for each button should be marked with a comment in the HTML sheet, for readability.
as little JS as possible on the HTML page
The only JS on the HTML page is currently two page-load functions:
draw image: instructs a snapshot to be taken of the canvas as a clean, blank, white JPG image.
current function: instructs that the drawing tool be default on page-load.
JS:
Component-based approach, with separate JS files containing the code for each tool.
Separate JS file named 'init' contains all 'click' event listeners and handlers for the buttons on the HTML page.
Separate JS file named 'canvas-common' contains code related to global mouse tracking and mouse click-activated toggle variables.
CSS:
Separate CSS local style sheet named 'style', with the general aim being to keep all CSS on this sheet and off the HTML sheet.
SOURCE JS FILES:
External scripts:
Fontawesome JS
Bootstrap JS
Google Icons
Jquery
Tether
Local scripts (Including:)
Canvas-common
Init
Drawing
Drawing-line
Drawing-curve
Drawing-circle
Drawing-rectangle
Drawing-triangle
Text
Fill
Color-picker
Pick-color
Eraser
Undo-redo
Upload-background
Save
CSS/SASS FILES:
Fontawesome CSS
Bootstrap CSS
CREDITS:
Built & designed by Choi Kin Lung (Jacky) and Christophe Elisha
</div>
Go
<div class="Popover anim-scale-in js-tagsearch-popover"
hidden
data-tagsearch-url="/Ch-oi/NotCanvas/find-symbols"
data-tagsearch-ref="christophe"
data-tagsearch-path="README.md"
data-tagsearch-lang="Markdown"
data-hydro-click="{"event_type":"code_navigation.click_on_symbol","payload":{"action":"click_on_symbol","repository_id":257155168,"ref":"christophe","language":"Markdown","originating_url":"https://github.com/Ch-oi/NotCanvas/blob/christophe/README.md","user_id":57091220}}"
data-hydro-click-hmac="731c5420149e79180d4bc1c2f167a5eabf35deca23a634b7db1922ea9727f7d1">
</main>
- © 2020 GitHub, Inc.
- Terms
- Privacy
- Security
- Status
- Help
</ul>
<a aria-label="Homepage" title="GitHub" class="footer-octicon d-none d-lg-block mx-lg-4" href="https://github.com">
<svg height="24" class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="24" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path></svg>
You can’t perform that action at this time.
<script crossorigin="anonymous" async="async" integrity="sha512-WcQmT2vhcClFVOaaAJV/M+HqsJ2Gq/myvl6F3gCVBxykazXTs+i5fvxncSXwyG1CSfcrqmLFw/R/bmFYzprX2A==" type="application/javascript" id="js-conditional-compat" data-src="https://github.githubassets.com/assets/compat-bootstrap-59c4264f.js"></script>
<script crossorigin="anonymous" integrity="sha512-CcHu7jzfxvBELN006wvfUN0tIOU83OJNyclvF0p+gQll1M1DjIioWsRbGZMgDL3zruW1D7dRxdbJqXM6P57PbA==" type="application/javascript" src="https://github.githubassets.com/assets/environment-bootstrap-09c1eeee.js"></script>
<script crossorigin="anonymous" async="async" integrity="sha512-327XCyOytNBlvvFRes7NYmY/gSME67CreRw+pR2DhNKBfEb2Sv0pe/XkZUSqYYlgGdDnaGIKUAb4oRZBLdKBfw==" type="application/javascript" src="https://github.githubassets.com/assets/vendor-df6ed70b.js"></script>
<script crossorigin="anonymous" async="async" integrity="sha512-9n5xp5Xpg6WScuVJvJN/VvUHz+F81pfCOw9cRsQn7X/xQCCZnHE3UYKyp4hGazMP9+DId5MlTweHJCV0F4b/KA==" type="application/javascript" src="https://github.githubassets.com/assets/frameworks-f67e71a7.js"></script>
<script crossorigin="anonymous" async="async" integrity="sha512-N666G/HyOSFV9HPnw/Ph4ufz00JU2x9wqs/DE/n3Ogp7uuMY02EzbWen/HON2xgp8h1DhFoFKIuCwc0njprM5A==" type="application/javascript" src="https://github.githubassets.com/assets/github-bootstrap-37aeba1b.js"></script>
You signed in with another tab or window. Reload to refresh your session.
You signed out in another tab or window. Reload to refresh your session.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent