jdebugcanvasjs/README.md

Nice features-rich debugging utility for canvas rendering

# JDebugCanvas JS

When it comes to rendering to canvas, things sometimes get messy! OffscreenCanvas not visible & sometime neither normal canvas,
maybe logging quick values to the screen, that's where our library come into use, packed up with plenty of useful feature, to help
you produce the most!

yeap that's me! [@yousef_neji](https://github.com/yousef312)

## CHANGELOG

Check changelog for more informations
[check](/CHANGELOG)

## How to?

Importing..

```javascript
// ESM
import JDebugCanvas from "jdebugcanvas";

// CommonJs
const JDebugCanvas = require("jdebugcanvas");
```

- Usage deep tutorial:

```javascript

// instantiation
let cdebug = new JDebugCanvas();

let off = new OffscreenCanvas(500,300);
let ctx = off.getContext("2d");
div.addEventListener('mousemove',function(e){
    if(clicked){
        drawToCanvas(ctx, e); // function that draw something on our offscreen canvas

        // visualize/preview the layer on the screen
        cdebug.render(ctx);
    }
})

div.addEventListener('mouseup',function(e){
    // maybe displaying the position of the mouse quickly!
    cdebug.log({ x: e.clientX, y: e.clientY});
    cdebug.log([e.clientX, e.clientY]);
    cdebug.lo(' x=', e.clientX, ' & y=', e.clientY); // accepts multiple parameters as you go
})

// ---- Adjusting settings
cdebug.setSettings("position","bottom-right") // for position "top-left" "top-right" "bottom-left" "bottom-right"

cdebug.setSettings("size",[550,300]) // the display canvas size

cdebug.setSettings("autoshow",true) // autoshow automatically display/hide the debugger when needed

cdebug.setSettings("bg","#000000") // set the canvas background color



// ---- opening/closing
document.querySelector('.open-debug').onclick = function(){
    cdebug.open();
}

document.querySelector('.close-debug').onclick = function(){
    cdebug.close();
}

// using a shortcut library like `qway`
qway.bind('ctrl+shift+i', function(){
    cdebug.toggle();
})


// ---- switching modes
cdebug.switch('canvas'); // normal canvas rendering mode
cdebug.switch('console'); // console mode to use ".log"
cdebug.switch('auto'); // will auto switch between when needed

```

## License

MIT