badico-cloud-hub · LucasBadico · Nov 28, 2022 · Nov 28, 2022
diff --git a/examples/feat-render-canvas.html b/examples/feat-render-canvas.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<body >
+    <div id="myCanvas">
+
+    </div>
+    </canvas>
+</body>
+<script type="module">
+import brickengine from '../src/index.js';
+const {
+    renders
+} = brickengine;
+const canvasRender = renders.canvas({
+    weight: 40,
+    lines: 10,
+    columns: 10,
+})// factory
+console.log(canvasRender)
+canvasRender.mount("myCanvas")// id
+canvasRender.writePixel(0, 2)
+canvasRender.writePixel(0, 1)
+canvasRender.writePixel(0, 0)
+setTimeout(() => canvasRender.erasePixel(0, 0)
+, 3000)
+
+</script>
+</html>
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,5 @@
+import * as renders from './renders/index.js'
+
+export default {
+    renders
+}
diff --git a/src/renders/canvas.js 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,
+    }
+}
diff --git a/src/renders/index.js b/src/renders/index.js
@@ -0,0 +1,3 @@
+import { default as canvas } from './canvas.js'
+
+export { canvas }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { default as canvas } from './canvas.js'

		export { canvas }