diff --git a/examples/feat-render-canvas.html b/examples/feat-render-canvas.html
new file mode 100644
index 0000000..68e7271
--- /dev/null
+++ b/examples/feat-render-canvas.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..9abb81a
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,5 @@
+import * as renders from './renders/index.js'
+
+export default {
+ renders
+}
\ No newline at end of file
diff --git a/src/renders/canvas.js b/src/renders/canvas.js
new file mode 100644
index 0000000..de3e5ce
--- /dev/null
+++ b/src/renders/canvas.js
@@ -0,0 +1,59 @@
+export default ({
+ weight,
+ lines,
+ columns
+}) => {
+ const canvas = document.createElement('canvas');
+ canvas.setAttribute('width', weight*columns)
+ canvas.setAttribute('height', weight*lines)
+ const ctx = canvas.getContext('2d')
+
+ function writePixel(x, y) {
+ const offset = (multiplier) =>
+ (weight - weight*multiplier)/2;
+ ctx.fillStyle = "#000";
+ ctx.fillRect(
+ x*weight,
+ y*weight,
+ weight,
+ weight,
+ );
+
+ ctx.fillStyle = "#CCC";
+ ctx.fillRect(
+ x*weight + offset(0.9),
+ y*weight + offset(0.9),
+ weight*0.9,
+ weight*0.9,
+ );
+
+ ctx.fillStyle = "#000";
+ ctx.fillRect(
+ x*weight + offset(0.7),
+ y*weight + offset(0.7),
+ weight*0.7,
+ weight*0.7
+ );
+ }
+
+ function mount(elementId) {
+ const target = document.getElementById(elementId);
+ if (target) {
+ target.appendChild(canvas)
+ }
+ }
+
+ function erasePixel(x, y) {
+ ctx.clearRect(
+ x*weight,
+ y*weight,
+ weight,
+ weight,
+ );
+ }
+ return {
+ writePixel,
+ erasePixel,
+ mount,
+ }
+}
\ No newline at end of file
diff --git a/src/renders/index.js b/src/renders/index.js
new file mode 100644
index 0000000..4c23486
--- /dev/null
+++ b/src/renders/index.js
@@ -0,0 +1,3 @@
+import { default as canvas } from './canvas.js'
+
+export { canvas }
\ No newline at end of file