Nice features-rich debugging utility for canvas rendering
npm install jdebugcanvasjsjavascript
// 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
``