From f01d1767611714943267a9d2f0de2f8d28db0529 Mon Sep 17 00:00:00 2001 From: lucas badico Date: Sun, 27 Nov 2022 23:29:58 -0300 Subject: [PATCH 1/2] feat: add and export the canvas render --- src/index.js | 5 ++++ src/renders/canvas.js | 59 +++++++++++++++++++++++++++++++++++++++++++ src/renders/index.js | 3 +++ 3 files changed, 67 insertions(+) create mode 100644 src/index.js create mode 100644 src/renders/canvas.js create mode 100644 src/renders/index.js 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 From ad5b8a4a338260fcebb75d353e29c7ccdca992dd Mon Sep 17 00:00:00 2001 From: lucas badico Date: Sun, 27 Nov 2022 23:31:01 -0300 Subject: [PATCH 2/2] doc: add the example file --- examples/feat-render-canvas.html | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 examples/feat-render-canvas.html 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