# article

title: Wasm on Canvas
summary: Render the Mandelbrot set into an canvas, just with Rust and Webassembly!
link: wasm-on-canvas
markdown:
  Rendering the [Mandelbrot set](https://en.wikipedia.org/wiki/Mandelbrot_set) on a canvas can be a very resource intensive operation when doing it with JavaScript. But with the power of new technologies like [Rust](https://rust-lang.org) and [WebAssembly](https://webassembly.org/) this can be done very efficiently and fast at almost the same speed as a native application. No more worries about resource intensive and bloated JavaScript scripts which transform your high-end PC into a slowly dying piece of electric waste. A toast to the bloat free experience.

  <div style="display: block; text-align: center"><canvas style="width: 50%"></canvas></div>

  <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 './assets/canvas_wasm.js';

  const run = async () => {
    const wasm = await init("./assets/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

    var 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>

html:
  <p>Rendering the <a href="https://en.wikipedia.org/wiki/Mandelbrot_set">Mandelbrot set</a> on a canvas can be a very resource intensive operation when doing it with JavaScript. But with the power of new technologies like <a href="https://rust-lang.org">Rust</a> and <a href="https://webassembly.org/">WebAssembly</a> this can be done very efficiently and fast at almost the same speed as a native application. No more worries about resource intensive and bloated JavaScript scripts which transform your high-end PC into a slowly dying piece of electric waste. A toast to the bloat free experience.</p>

  <div style="display: block; text-align: center"><canvas style="width: 50%"></canvas></div>

  <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 './assets/canvas_wasm.js';

  const run = async () => {
    const wasm = await init("./assets/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

    var 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>


