„README.md“ ändern

README.md

@@ -14,3 +14,40 @@ This library aims to provide JavaScript bindinds to render patters on canvas wit
 ## Releases
 
 Pre compiled binaries can be found in the releases section.
+
+```
+<script type="module">
+import init, {allocate_framebuffer,set_render_range,get_framebuffer_size,get_framebuffer_pointer,get_framebuffer_pixel_size,fill_framebuffer,render_mandelbrot} from './canvas_wasm.js';
+
+const run = async () => {
+  const wasm = await init("./canvas_wasm_bg.wasm"); // Loads WASM file
+  
+  const width = 200;
+  const height = 200;
+
+  const canvas = document.querySelector("canvas");
+  const canvas_context = canvas.getContext("2d");
+  const canvas_image = canvas_context.createImageData(width,height)
+
+  allocate_framebuffer(width,height);  // Allocates the framebuffer
+
+  const wasm_memory = new Uint8Array(wasm.memory.buffer); // Gets Uint8 Array with memory, must be done after framebuffer allocation
+
+  const framebuffer_ptr = get_framebuffer_pointer(); // Gets the pointer for the framebuffer memory
+
+  const image_data = canvas_context.createImageData(width,height); // Creates image data
+
+  canvas_context.clearRect(0,0,width,height); // Clears the canvas
+
+  render_mandelbrot(width,height,50,1); // Renders the mandelbrot set to the framebuffer
+
+  image_array = wasm_memory.slice(framebuffer_ptr,framebuffer_ptr+(width*height*4)); // Gets the framebuffer array
+  image_data.data.set(image_array); // Creates image data from byte array
+  canvas_context.putImageData(image_data,0,0) // Puts the image data in the canvas framebuffer.
+
+}
+
+run();
+
+</script>
+```